CSS
Background Images
CSS can be used to apply background images to different parts of a web page. The property used for this purpose id background-color.
Background Images
Below examples will demonstrate the basic architecture of background image in CSS
Basic Syntax:
p{
background-image: url("http://www.phpdocs.com/images/css3.png");
}
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style type="text/css">
body{
background-image: url("http://www.phpdocs.com/images/css3.png");
}
</style>
</head>
<body>
...
</body>
</html>
The style of displaying the background image can easily controlled in CSS. Different options for controlling background image are as follows.
Background Repetition
The repetition of image in the background can be controlled by using background-repeat property.
The most commonly used values for this property are as follows:
Values | Description |
---|---|
no-repeat | It displays image only one time without any repetition |
repeat-x | It repeats the image horizontally for one row |
repeat-y | It repeats the image horizontally for one column |
Basic Syntax:
h1{
background-image: url("http://www.phpdocs.com/images/css3.png");
background-repeat: no-repeat;
}
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style type="text/css">h1{
background-image: url("http://www.phpdocs.com/images/css3.png");
background-repeat: no-repeat;
}</style>
</head>
<body>
<h1>PHPDocs</h1>
</body>
</html>
Background Attachment
Normally, the background image moves when the user scrolls up or down the web page, background-repeat property is used to specify the bacground attachment.
The most commonly used values for this property are as follows:
Values | Description |
---|---|
fixed | It preserves the image to be scrolled |
scroll | Default value. It allows to scroll the background image |
local | It allows to scroll the background image with the element’s contents |
Basic Syntax:
h1{
background-image: url("http://www.phpdocs.com/images/css3.png");
background-attachment: fixed;
}
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style type="text/css">
h1{
background-image: url("http://www.phpdocs.com/images/css3.png");
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>PHPDocs</h1>
</body>
</html>
Background Position
It is possible to specify the position of the background image relative to the element behind which it is applied.
The most commonly used values for this property are as follows:
top | center | bottom | left | right |
Basic Syntax:
h1{
background-image: url("http://www.phpdocs.com/images/css3.png");
background-position: right bottom;
}
Example:
<!doctype html>
<html>
<head>
<title>...</title>
<style type="text/css">
h1{
background-image: url("http://www.phpdocs.com/images/css3.png");
background-position: right bottom;
}
</style>
</head>
<body>
<h1>PHPDocs</h1>
</body>
</html>