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

text-box{

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 2×2 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 2×2 and not 1×1? Because some time IE can gives you problems if you use a 1×1 background.

text-box{

background: url(’2×2.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 http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-origin

More info about background size http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size

Background Showcase

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

Juan Diego Velasco

juan diego velasco

Butcher

butcher

Odopod

odopod

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

Duplika

duplika

Cyan

cyan

Jon Abel

jon abel

Cube Club Chemnitz

cube club chemnitz

ChamaDigital

chamadigital

Kraft Food&Family

kraft food & family

Twelve Restaurant

twelve restaurant

GoToChina

gotochina

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

Correlated Articles