0

I have been busy at this for too long. Have looked at other questions and answers and NONE of them seem to help me. Tried very many things.

What I want is to have a background image in the middle of the screen and when you make the browser smaller, the image should keep its size and stay in the middle of the screen, so the left AND right site of the background should fall out of the screen and the middle stays visable. p.s. I do see that the image gets cropped vertically a little bit too.

For example: http://www.jandekeyzer.be/ The slider background image does exactly what I want to have... What is the trick to do this.

Background-position center center, etc, does not do the trick. I am missing something. I have the code in the style.css. At this moment (since it didnt help) I stripped it down to only background-repeat: no-repeat; background-position: center center; (but even this does nothing).

Who can help me?

shilovk
  • 11,718
  • 17
  • 75
  • 74
Erwin
  • 11
  • 1

6 Answers6

0

Try using background-size: cover;

Use cover background size property to resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

AJK
  • 391
  • 9
  • 27
0

You can try using any of the below to properties:

1) background-size: contain; background-size: contain ensures that the entire background image will fit the background area, keeping its original aspect ratio. if the area is small, it will shrink the image and make it fit, if its larger than the image, it will fill the gaps,by repeating the images , which can be prevented using background:no-repeat

2) background-size: cover; this will fill the entire background area, without any gaps.

You can checkout this link for more solutions: Responsive background images

Pbk1303
  • 3,702
  • 2
  • 32
  • 47
0

This should work

background-attachment: fixed;  
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
Muhammad Kazim Sadiq
  • 101
  • 1
  • 9
  • Welcome to StackOverflow! please check the [How do I write a good answer](https://stackoverflow.com/help/how-to-answer) guide so you can better improve your answers. – Spoody Apr 01 '18 at 14:13
0

Hi, if I understood your question. then it will work. try this 

.Selector{      
   background-image: url('../images/image.jpg'); // Background Image (Set location) 
   background-repeat: no-repeat;  // Never repeat
   background-size: cover;        // Keep size cover
   background-position: center;   // Set image postion center
}
devzakir
  • 387
  • 3
  • 15
0

Thank you all for thinking with me. But unfortunately i does not resolve it. Tried it all now.

background: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
position: relative;
min-height:700px;

It will just not go to the middle, but keeps align left. Only when deleting all lines and putting background-size: 100%; the background stays in the middle. But yes, it loses its size when making the browser smaller.

Erwin
  • 11
  • 1
0

I think that there is something in the code holding it from doing what I want. Is there someone who could have a look at the code if I email it?

Erwin
  • 11
  • 1