Tutorials - CSS - Backgrounds

The background color of your website can be hugely important as it affects how your users read your pages. If you are designing a professional website we'd recommend you get a professional designer to suggest a color scheme, but dark text on a light background is often a safe bet. If you're designing for yourself or just a bit of practice, you can use any color scheme you like.

We looked at backgrounds in the HTML tutorial, and making backgrounds in CSS is quite similar. You can specify colors in the same three ways as in HTML (named colors, hex values and rgb values). Here's a few demonstrations to see the syntax for specifying the background-color property in CSS:

<h3 style="background-color: green;">Background color green</h3>
<p style="background-color: #333333;">Background color #333333</p>
<ul style="background-color: rgb(255,0,0)">
    <li>These list items have not got their own style</li>
    <li>so will have rgb(255,0,0) from their parent element</li>
</ul>

Background color green

Background color #333333

These list items have not got their own style
so will have rgb(255,0,0) from their parent element

Background Images

Just like with HTML backgrounds, you can also specify an image to act as the background for your element. By using CSS, you also get access to some additional properties you would not have been able to use before:

Background Repeating Settings
Background Scroll Settings
Precise Positioning

These can be used in combination to make backgrounds which would not be possible without using CSS. We'll use the repeating image we used in the HTML background tutorial to show you how this works.


<!-- Using Default Setings (repeat) -->

<p style="background-image: url(/images/tes.jpg);">Praesent et elit dolor, et tempor ipsum. In tristique molestie lacinia. Nam vel arcu erat. Suspendisse dictum bibendum sem at convallis. Suspendisse ac sapien eu arcu volutpat pulvinar sed in lorem. Sed sit amet tellus tellus, eget fringilla quam. Fusce tortor tellus, pellentesque ut dapibus et, vehicula non nibh. Donec luctus arcu a dolor sodales sed consequat nunc commodo. Donec auctor ultrices felis, vel aliquam purus feugiat in. Morbi quis diam metus. Etiam vitae orci eget turpis sollicitudin vehicula vel ut quam. In nec posuere turpis. Quisque non justo suscipit quam feugiat suscipit eget cursus eros. Vivamus a massa lectus. Aliquam erat volutpat. Nam molestie iaculis ante a eleifend. 
</p>

<!-- Using no repeat -->

<p style="background-image: url(/images/tes.jpg); background-repeat: no-repeat;">Praesent et elit dolor, et tempor ipsum. In tristique molestie lacinia. Nam vel arcu erat. Suspendisse dictum bibendum sem at convallis. Suspendisse ac sapien eu arcu volutpat pulvinar sed in lorem. Sed sit amet tellus tellus, eget fringilla quam. Fusce tortor tellus, pellentesque ut dapibus et, vehicula non nibh. Donec luctus arcu a dolor sodales sed consequat nunc commodo. Donec auctor ultrices felis, vel aliquam purus feugiat in. Morbi quis diam metus. Etiam vitae orci eget turpis sollicitudin vehicula vel ut quam. In nec posuere turpis. Quisque non justo suscipit quam feugiat suscipit eget cursus eros. Vivamus a massa lectus. Aliquam erat volutpat. Nam molestie iaculis ante a eleifend. 
</p>

<!-- Using repeat-x (horizontal) -->

<p style="background-image: url(/images/tes.jpg); background-repeat: repeat-x;">Praesent et elit dolor, et tempor ipsum. In tristique molestie lacinia. Nam vel arcu erat. Suspendisse dictum bibendum sem at convallis. Suspendisse ac sapien eu arcu volutpat pulvinar sed in lorem. Sed sit amet tellus tellus, eget fringilla quam. Fusce tortor tellus, pellentesque ut dapibus et, vehicula non nibh. Donec luctus arcu a dolor sodales sed consequat nunc commodo. Donec auctor ultrices felis, vel aliquam purus feugiat in. Morbi quis diam metus. Etiam vitae orci eget turpis sollicitudin vehicula vel ut quam. In nec posuere turpis. Quisque non justo suscipit quam feugiat suscipit eget cursus eros. Vivamus a massa lectus. Aliquam erat volutpat. Nam molestie iaculis ante a eleifend. 
</p>

<!-- Using repeat-y (vertical) -->

<p style="background-image: url(/images/tes.jpg); background-repeat: repeat-y;">Praesent et elit dolor, et tempor ipsum. In tristique molestie lacinia. Nam vel arcu erat. Suspendisse dictum bibendum sem at convallis. Suspendisse ac sapien eu arcu volutpat pulvinar sed in lorem. Sed sit amet tellus tellus, eget fringilla quam. Fusce tortor tellus, pellentesque ut dapibus et, vehicula non nibh. Donec luctus arcu a dolor sodales sed consequat nunc commodo. Donec auctor ultrices felis, vel aliquam purus feugiat in. Morbi quis diam metus. Etiam vitae orci eget turpis sollicitudin vehicula vel ut quam. In nec posuere turpis. Quisque non justo suscipit quam feugiat suscipit eget cursus eros. Vivamus a massa lectus. Aliquam erat volutpat. Nam molestie iaculis ante a eleifend. 
</p>

Praesent et elit dolor, et tempor ipsum. In tristique molestie lacinia. Nam vel arcu erat. Suspendisse dictum bibendum sem at convallis. Suspendisse ac sapien eu arcu volutpat pulvinar sed in lorem. Sed sit amet tellus tellus, eget fringilla quam. Fusce tortor tellus, pellentesque ut dapibus et, vehicula non nibh. Donec luctus arcu a dolor sodales sed consequat nunc commodo. Donec auctor ultrices felis, vel aliquam purus feugiat in. Morbi quis diam metus. Etiam vitae orci eget turpis sollicitudin vehicula vel ut quam. In nec posuere turpis. Quisque non justo suscipit quam feugiat suscipit eget cursus eros. Vivamus a massa lectus. Aliquam erat volutpat. Nam molestie iaculis ante a eleifend.

Background Positioning

To position a background in CSS you need to use a combination of for properties - background-image and background-repeat which we have already seen, and background-position and background-attachment. You should only need background-position, but some browsers require the background-attachment property as well, so we will include it. Positioning your background image is done by settings these properties as follows:

p {
   background-image: url(/images/tes.jpg);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: /* put your position here */

The position can be specified as one of nine grid positions (top, center, bottom and left, center, right in any combination), as a fixed amount of pixels with 0px,0px bein the top left of the element or as a percentage of the element size with 0%, 0% being the top left of the element. Here's an example using 50%, 50%:


<p style="background-image: url(/images/tes.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50%;">Praesent et elit dolor, et tempor ipsum. In tristique molestie lacinia. Nam vel arcu erat. Suspendisse dictum bibendum sem at convallis. Suspendisse ac sapien eu arcu volutpat pulvinar sed in lorem. Sed sit amet tellus tellus, eget fringilla quam. Fusce tortor tellus, pellentesque ut dapibus et, vehicula non nibh. Donec luctus arcu a dolor sodales sed consequat nunc commodo. Donec auctor ultrices felis, vel aliquam purus feugiat in. Morbi quis diam metus. Etiam vitae orci eget turpis sollicitudin vehicula vel ut quam. In nec posuere turpis. Quisque non justo suscipit quam feugiat suscipit eget cursus eros. Vivamus a massa lectus. Aliquam erat volutpat. Nam molestie iaculis ante a eleifend. </p>

Page Responses

Currently there have been no responses to this page...

Post Response

If you have anything to contribute to this tutorial, found a bug, or know a better way of achieving the same goal, please leave your response below.