Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials
PHP Tutorials

Web-Development-Tutorials.com

Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals

CSS Background Images and Colors Tutorial

CSS background properties allow you to specify things such as:

Setting Background Colors

The background color property allows you to set the background color of an HTML element.

The following CSS code example shows how to set the background property of a paragraph in an internal style sheet.

<html>
<head>
<style type="text/css">
p
{
background-color: yellow
}
</style>
</head>
<body>
<p>
This paragraph will have a yellow background
</p>
</body>
</html>

Click on CSS Background Example to the web page the above code produces.

<html>
<head>
<style type="text/css">
body
{
background-color: yellow
}
</style>
</head>
<body>
<p>
This web page will have a yellow background
</p>
</body>
</html>

Click on CSS Background Example to view the web page the above code produces.


Setting an Image as a Background

The following CSS code shows how to insert an image as a background. By default, the page background image will scroll with the page. Scroll up and down the web page and notice how the image scrolls with the web page.

<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg')
}

</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Background Example to view the web page the above code produces.


Creating a Fixed Background Image

It is possible to create a fixed background image using the background-attachment: fixed property. The property allows the image to stay in the same place on the screen while the web page scrolls.

<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-attachment: fixed
}

</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Background Example to view the web page the above code produces. Scroll up and the web page and notice you will notice that the position of the background image stays fixed.


Controlling the Background Tiling Effect

You can control the tiling effect of the background image with the use of the background-attachment: fixed property. The following CSS examples show you how to control the various tiling effects with the respective background repeat properties.

The CSS code {background-repeat: repeat} will tile the image both horizontally and vertically. This is the default setting.

<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: repeat
}

</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Background Example to view what this code produces.


You can tile the image in the horizontal direction only if you like.

<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: repeat-x
}

</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Background Example to view what this code produces.


You can tile an image in the vertical direction only.

<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: repeat-y
}

</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Background Example to view what this code produces.


You can have a background image appear only once.

<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: no-repeat
}

</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Background Example to view what this code produces.


Positioning a Background Image

CSS allows you to control precisely where you will place a background image within an HTML element by using the background-position property.

The CSS code background-position:  x% y% allows you to place the background image x% (x percentage) across the web page and y% (y percentage) down the web page. Giving it values of "0 0" will place the background image in the top left hand corner.

<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: 50% 50%
}

</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Background Example to view what this code produces.


The CSS code {background-position: x y} allows you to place a background image x units across the web page and y units down the web page. The "x" and "y" represent any unit you specify.

<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: 100px 200px
}

</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Background Example to view what this code produces.


CSS allows you to easily position a background image using various combinations of the following words: top left, top center, top right, center left, center center, center right, bottom left, bottom center and bottom right.

<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: bottom right
}

</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html>

Click on CSS Background Example to view what this code produces.

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details