Css – way to use max-width and height for a background image

cssfluidimage

That simple.

Moving my layout into a fluid territory, working on scalable images. Using the img tag and setting max-width to 100% works perfectly, but i'd rather use a div with the image set as its background.

The issue I'm running into is that the image doesn't scale to the size of the div it's in the background of. Any way to add markup to the background code to set it to 100% width of it's container?

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}

Best Answer

As thirtydot said, you can use the CSS3 background-size syntax:

For example:

-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;

However, as also stated by thirtydot, this does not work in IE6, 7 and 8.

See the following links for more information about background-size: http://www.w3.org/TR/css3-background/#the-background-size

Proper uses of IMG

Use IMG if you intend to have people print your page and you want the image to be included by default. —JayTee
Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

Pragmatic uses of IMG

Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat
Use IMG if you rely on browser scaling to render an image in proportion to text size.
Use IMG for multiple overlay images in IE6.
~~Use IMG with a z-index in order to stretch a background image to fill its entire window.~~
Note, this is no longer true with CSS3 background-size; see #6 below.
Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

Use CSS background images if the image is not part of the content. —sanchothefat
Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
Use background-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee
Use background-image if you need to improve download times, as with CSS sprites.
Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
Use background-image with background-size:cover in order to stretch a background image to fill its entire window.

Javascript – How to get image size (height & width) using JavaScript

You can programmatically get the image and check the dimensions using Javascript...

const img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

This can be useful if the image is not a part of the markup.

Best Answer

Related Solutions

Html – When to use IMG vs. CSS background-image

Proper uses of IMG

Pragmatic uses of IMG

When to use CSS background-image

Javascript – How to get image size (height & width) using JavaScript

Related Topic