Sometimes a nice colour isn't enough. Perhaps you want a nice photo of your favourite cat in the background? Or a calming picture of the daylight sky perhaps? Maybe you're making the next hi-tech website for NASA corporation and you want to be nice and typical and use a picture of our magnificent solar system for the background? Well, CSS is your ally here too. Setting a background image, and manipulating it to your will is almost as easy as setting a background colour.
body
{
background-image:url('blue-circle-bg.png');
}
So that we can see what it looks like, we're going to take the following image:
And we're going to use it as a background for a div element.
<div style="background-image:url('blue-circle-bg.png');">
This div has a blue circle background.<br><br>
I think it looks pretty nice in all<br>
honesty. Notice how the background by<br>
default is repeated both horizontally<br>
and vertically within the div element?
</div>
Output
I think it looks pretty nice in all
honesty. Notice how the background by
default is repeated both horizontally
and vertically within the div element?
It's as easy as including an image. The address inside the two quotes will just be the full address of the image if it's on another website, and the relative file-name if it's on your very own website. Just remember to include the file extension. Any valid image file will work!
Repeat the background?
By default the above will cause the image used to repeat both across and downwards, so it fills the entire element with the chosen background image. Sometimes however you might want to only have the image repeat horizontally, or vertically. You might want it not to repeat, and for it only to appear once! Not to worry! For this we have the background-repeat CSS attribute.
Let's take our blue circle and look at a few examples of this.
Horizontally Only
<div style="background-image:url('blue-circle-bg.png'); background-repeat: repeat-x;">
This div has light blue circle for a background.<br><br>
In this example however, I repeat it only<br>
horizontally.
</div>
Output
In this example however, I repeat it only
horizontally.
Vertically Only
<div style="background-image:url('blue-circle-bg.png'); background-repeat: repeat-y;">
This div has light blue circle for a background.<br><br>
In this example however, I repeat it only<br>
vertically.
</div>
Output
In this example however, I repeat it only
vertically.
Don't repeat (only display once)
<div style="background-image:url('blue-circle-bg.png'); background-repeat: no-repeat;">
This div has light blue circle for a background.<br><br>
In this example however, I don't repeat it at<br>
all, so it displays only once.
</div>
Output
In this example however, I don't repeat it at
all, so it displays only once.
Background position
You can also position the background.
body
{
background-image:url('image-file.jpg');
background-position: top right;
}
The variations for positioning the background are:
background-position: top left;
background-position: top;
background-position: top right;
background-position: left;
background-position: center;
background-position: right;
background-position: bottom left;
background-position: bottom;
background-position: bottom right;
Here's an example:
<div style="background-image:url('blue-circle-bg.png'); background-position: top-left;">
This div has light blue circle for a background.<br><br>
In this example however, I place it at the<br>
top left of the element.
</div>
Output
In this example however, I place it at the
top left of the element.
You can combine this property with the background-repeat property, though, there are many, many combinations of the above, so the best thing you can do is try it yourself, and see the effects right away. Once you've mastered the CSS for messing with the background image, move onto the end of chapter quiz, and be quick about it *shakes keyboard*.