Responsive css background images

css responsive-design background-image image-resizing
jochemke picture jochemke · Sep 26, 2012 · Viewed 713k times · Source

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;
}

Answer

Andrei Volgin picture Andrei Volgin · Sep 26, 2012

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.

Related questions

Image in full screen with img tag

I am using the img tag for my slider images, I need the image to be full width and height and centered inside its' container. My problem is when I resize the window width, my image becomes small and it's …

Read More
Responsive web design : "How to resize a background image according to browser window size using CSS"?

I am creating a site where my all products images will be re-size according to browser window size so i wrote some media queries where i used one big image and re-sized it in different window size but i have …

Read More
Font scaling based on width of container

I'm having a hard time getting my head around font scaling. I currently have a website with a body font-size of 100%. 100% of what though? This seems to compute out at 16 pixels. I was under the impression that 100% would somehow refer …

Read More