Using Backgrounds with CSS2.1 and CSS3
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 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.
text-box{
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 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!
Odopod
Need more about CSS? Follow us on Twitter! Every day News and Resources not published in our blog.