Working With Webpage Backgrounds in CSS

By: Daniel Imbellino
Updated: Feb 28, 2013

Cascading Style Sheets offer web designers a vast array of ways to work with the background properties of a webpage. You can set background images in CSS and scale them appropriately for alternate devices using a number if new methods with CSS3, and we're going to show you how!

CSS Background-image:

body {background-image: url("my-image.png"); background-repeat: no-repeat; background-attachment: fixed; background-size: contain; }

The background-image property can link to an image file in your current directory or an image file located somewhere across the internet. For instance:
body {background-image: url("http://example.com/example-image.png"); background-repeat: no-repeat; background-attachment: scroll; background-size: contain; }


You can also specify an images transparency in CSS like this:
body {background-image: url("example-image.png"); opacity: 0.5; filter:alpha(opacity=50); }
You can use values from 0.0 to 1 to specify the transparency in an image. The lower the value the more transparent the image or element becomes.
For instance, a value of 0.8 would be just slightly transparent, while a value of .2 would be heavily transparent when viewed. Likewise, the "filter:alpha" property runs on a scale of 0 to 100, with 100 being the least transparent. Most browsers use the "opacity" property, while internet explorer 8 and earlier use the "filter:alpha" property. Internet explorer 9 is supposed to be compatible with the standard "opacity" property, so far this doesnt appear to be the case, so plan on using both properties when specifying transparency in your CSS images.

CSS Background-Size:

If you are using an image for a web page background, and that image isnt large enough to fill a users LCD screen, the image will automatically repeat, or there will be a white space where the image ends. The results depend on the browser being used. But, either way, both results are unacceptable. This is where the "contain" value of the "background-size" property comes into play. The "contain" property specifies to the browser to scale the image proportionately across an containing element, as large as is possible while not exceeding the size of the containing element. By using the "contain" value when specifying a background image, you specify to the browser to display the image by scaling to the size of an elements width and height, filling all areas equally as much as possible. This helps alot when working with smaller image files.

You can also specify a height and width for a background image like this:
body {background-image: url("new-image.png"); background-size: width height; }
Ex: body {background-image: url("new-image.png"); background-size: 250px 400px; }
This sets the background image to scale to 250 pixels horizontally, and 400 pixels vertically. Or you could use percentages such as 40% 55%. If you use percentages instead of pixel values, the background size is then scaled depending on the size of the containing element. So, if you were to specify values of 40% and 60% for a background image in CSS, this means the image will take up 40% of the screen horizontally, and 60% of the screen vertically.

Just like the "background-size: contain" property scales an image to its largest possible size within a given element, the "background-size: cover" property is used to scale an image as large as is possible to fill the entire background!
Ex: body {background-image: url("new-image.png"); background-size: cover; }
The "cover" property could be used to scale a full page background for instance.

CSS Background-Repeat:

The "background-repeat" property specifies whether or not you want the image to repeat vertically, horizontally, or not at all within a specified element using the "repeat-x" or "repeat-y", or "repeat: no-repeat;" values respectively.
For instance: #image {width: 400px; height: 400px; position: absolute; left: 200px; top: 185px; background-image: url("sample-image.jpg"); background-repeat: repeat-x; }
In this instance we specifed for the image "sample-image.jpg" to repeat horizontally across the screen. If we had used "background-repeat: repeat-y", then the image would be repeated vertically. We can also specify for an image to not repeat at all, a likely choice in most scenarios: #image {width: 400px; height: 400px; position: absolute; left: 200px; top: 185px; background-image: url("http://example.com/example-directory/eample-image.jpg"); background-repeat: no-repeat; }

The Background attachment property:

Here we are defining how we want a specific element to be rendered and flow within in a page. If we specify our attachment property as fixed, then an element (selector) remains in a fixed position, and will not scroll with the rest of the page. If we specify our attachment property as "scroll" then the corresponding element will be able to scroll along with the page. The "background-attachment: fixed;" value specifies to fix the background image in place and not allow it to move with the page, while as the "background-attachment: "scroll;" value specifies to scroll the background image along with the rest of the page.
If we set our attachment property as "inherit", then the element (or selector) will inherit the background attachment property of its parent or pervious element.

Working With Webpage Backgrounds in CSS - Part 2