Simple CSS Backgrounds
0
The background of a website is a very important element of the design. It sets the tone of the site, as well as framing in the content. There are three simple CSS methods to create this effect.
One Color Background
The one color background is great for creating fast loading websites. Not having a background image equals bandwidth savings.
body {
background-color: #a1bad1;
}
Repeating Pattern
Repeating patterns allow the background to scale to any resolution. As the screen gets wider or taller the background expands with it. Many times the images used in the background have a smaller file size this means faster page loads.
body {
background-color: #000000;
background-image: url(images/bg.jpg);
}
Horizontally Repeating Background
A horizontally repeating background typically fades to a solid color on the bottom. Just like the repeating background this allows the background to scale to screen size.
body {
background-color: #000000;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}
Image Background
Although large image backgrounds can take a little longer to load, they do provide a stunning visual impact when done right.
body {
background-color: #000000;
background-image: url(images/bg.jpg);
background-position: center top;
background-repeat: no-repeat;
}
Leave a comment
To leave a comment, please log in / sign up
RSS Feed
Facebook
Twitter
LinkedIn
YouTube