Categories
background-image css image-resizing responsive-design

Responsive css background images

223

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 idea on how to do this except for one thing that I can think of but it’s quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.

Basically what I wanna achieve is that the image (with the watermark ‘G’) automatically resizes without displaying less of the image. If it’s possible of course

link: g-floors.eu

Code I have so far (content part)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

3

  • 7

    Take a look at this link, might it be what you are looking for? css-tricks.com/perfect-full-page-background-image

    Sep 26, 2012 at 20:07

  • I feel like this solution that Christofer Vilander posted is a better solution than the chosen answer.

    – CU3ED

    Mar 21, 2013 at 6:45

  • Just wondering why the site doesn’t actually implement this resizing feature you were asking about, as of Feb 2015? Was there some issue with it?

    Feb 20, 2015 at 12:28

411

If you want the same image to scale based on the size of the browser window:

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

Do not set width, height, or margins.

EDIT:
The previous line about not setting width, height or margin refers to OP’s original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

14

  • 4

    Is it also possible to auto resize the width and let the height be fixed?

    – jochemke

    Sep 27, 2012 at 19:06

  • 4

    Yes, you can set the height of the image in pixels and the width in percents, but the image will be destorted. It won’t look nice.

    Sep 27, 2012 at 22:05

  • 2

    You can use a much smaller image if you use a vector format: en.m.wikipedia.org/wiki/Scalable_Vector_Graphics

    Sep 28, 2012 at 8:30

  • 15

    What? Not setting width, height to the container won’t show the image at all.

    – snow

    Nov 11, 2016 at 11:54

  • 3

    (1) The original question was about scaling based on a browser window size. (2) Elements like div get their own height from their own content, or take available space in a flexbox model. Saying that without explicit width/height the container won’t show at all is incorrect. Obviously, if you want to display an empty div with a background image, you will need to set the height and, possibly, width, but then you will see only a part of an image, unless the aspect ratio is exactly the same as of the image itself.

    Nov 11, 2016 at 15:11

80

by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

1

  • At screen size 800x1280px, the image gets cut off on the right side by the box. All the other sizes seem fine.

    – Mugé

    Oct 28, 2016 at 16:54

64

Try this :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

0