Applying Backgrounds with CSS
Posted The: 08/09/2008 At: 15:35
Contents:
This tutorial presume you already know about URI's and how to use them. The Article on Absolute and Relative Paths may be of help to those who dont.
The Background Properties
The properties used when applying backgrounds are listed in the reference entry Background Properties, this tutorial covers basic usage of these.
Background images.
The body element.
Applying a background on the body element will apply a background for the intire page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>backgrounds in css</title>
<style type="text/css">
body {
background-image: url("background.jpg");
}
</style>
</head>
<body>
<h1>Change the Background using CSS.</h1>
<p>apply a background using css.</p>
</body>
</html>
Note. The above example is using embedded styles, its recommended to use External StyleSheets.
Repeating the Background
Through the use of the Background-repeat Property, you will either be able to repeat the image Horizontally (repeat-x) or Vertically (repeat-y), you can also disable the repeating (no-repeat).
<style type="text/css">
body {
background-image: url("background.jpg");
background-repeat: repeat-x;
}
</style>The default setting is repeat, which repeats the image in both diractions.
Locking the Background
We can also lock the Background-image so it appears fixed doing scrolling, this is done through the use of the background-attachment property
<style type="text/css">
body {
background-image: url("background.jpg");
background-repeat: repeat-x;
background-attachment: fixed;
}
</style>
Background colors
Paragraphs
Most elements can have a background applied, so lets change the background color on some text.
<style type="text/css">
p {
background-color: blue;
}
</style>Note. You should read about CSS Selectors to understand how to best apply your styles.
Comments: [0]
