Responsive css background images

Question

I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don\'t have any i

Answer 1

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)

Answer 2

I used

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

which worked really well.

Answer 3

If you want the entire image to show irrespective of the aspect ratio, then try this:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

This will show the entire image no matter what the screen size.

Answer 4

Just two lines of code, it works.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

Answer 5

CSS:

background-size: 100%;

That should do the trick! :)

Answer 6

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

or

background-size:100%;