Using Backgrounds with CSS2.1 and CSS3

Optimize your CSS

Using Backgrounds with CSS2.1 and CSS3

Oggi vogliamo darvi alcuni consigli sull'utilizzo dei Background con CSS2.1 e CSS3. Nell'articolo potrete anche vedere una lista di bellissimi siti con background splendidi.

Today we want to try to give you some tips about Backgrounds in CSS2.1 and CSS3. In the article you can see also a list about impressive websites with stunning backgrounds.

All Backgorund Properties in One Declaration

We can optimize our CSS including all properties in one declaration. The following declarations shows you how to set color background (#FFFFFF), image background (your-file.jpg), background repetition (no repetition in this example), background attachment (fixed, no scroll) and the background position (aligned to the left and and at the top of the page).

background:  #FFFFFF url('your-file.jpg') no-repeat fixed left top;

For Better Yield of the Background Set the Image Opacity of elements of the page with CSS3


background-color: #FFFFFF;

opacity: 0.6;

filter: alpha(opacity=40) //for IE


or  Set the Image Opacity using CSS2.1 to avoid IE problems

Create a 2x2 image, choose a color and fill the image with opacity to (for example) 60%, after save the image as a .png and use it as background. In this way you avoid all opacity IE Problems related.

Why 2x2 and not 1x1? Because some time IE can gives you problems if you use a 1x1 background.


background: url('2x2.png');


Background Extended to 100% in CSS3

With the following example we show you how to set a background with width and height to 100%

div {
    background-image: url(your-image.png);
    background-size: 100%;
    background-origin: content;

What's "background-origin: content;"? See

More info about background size

Background Showcase

We discovered some amazing websites that use backgrounds with excellent results!

Juan Diego Velasco

juan diego velasco





For a Beautiful Web

for a beautiful web

Design by Humans

design by humans

Christine Galvin

christine galvin

The Things I do

the things i do

Peter Pearson

peter pearson

Sunday Morning

sunday morning

Studio Banks

studio banks

Inner Metro Green

inner metro green

Jason Bradbury

jason bradbury





Jon Abel

jon abel

Cube Club Chemnitz

cube club chemnitz



Kraft Food&Family

kraft food & family

Twelve Restaurant

twelve restaurant



Need more about CSS? Follow us on Twitter! Every day News and Resources  not published in our blog.