Hello dear readers! welcome back to another section of my tutorial on Css. In my last tutorial post, we studied about Css Measurement Units. In this tutorial post, we are going to be discussing about the Css backgrounds.
This section of my tutorial teaches you how to set backgrounds of various Html elements. You can set the following background properties of an element:
- The background-color property is used to set the background color of an element.
- The background-image property is used to set the background image of an element.
- The background-repeat property is used to control the repetition of an image in the background.
- The background-position property is used to control the position of an image in the background.
- The background-attachment property is used to control the scrolling of an image in the background.
- The background property is used as a shorthand to specify a number of other background properties.
RECOMMENDED: Python Basic Syntax Tutorial
Set the Background Color
Following is the example, which demonstrates how to set the background color for an element.
<html>
<head>
</head>
<body>
<p style="background-color: blue;">
This text has a blue background color.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="background-color: blue;">
This text has a blue background color.
</p>
</body>
</html>
Set the Background Image
Following is the example, which demonstrates how to set the background image for an element.
<html>
<head>
</head>
<body>
<table style="background image:url(/image/novapic.gif);">
<tr>
<td> This table has background image set. </td>
</tr>
</table>
</body>
</html>
<head>
</head>
<body>
<table style="background image:url(/image/novapic.gif);">
<tr>
<td> This table has background image set. </td>
</tr>
</table>
</body>
</html>
Repeat the Background Image
The following example below demonstrates how to repeat the background image if an image is small. You can make use of no-repeat value for the background-repeat property if you don't want to repeat an image. In this case, the image will display only once.
By default the background-repeat property will have a repeat value.
<html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-repeat: repeat;">
<tr>
<td> This table has background image which repeats multiple times. </td>
</tr>
</table>
</body>
</html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-repeat: repeat;">
<tr>
<td> This table has background image which repeats multiple times. </td>
</tr>
</table>
</body>
</html>
RECOMMENDED: Html Tables (Conclusion)
Following is the example, which demonstrate how to repeat the background image vertically.
<html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-repeat: repeat-y;">
<tr>
<td> This table has background image set which will repeat vertically. </td>
</tr>
</table>
</body>
</html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-repeat: repeat-y;">
<tr>
<td> This table has background image set which will repeat vertically. </td>
</tr>
</table>
</body>
</html>
Following is the example, which demonstrate how to repeat the background image horizontally.
<html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-repeat: repeat-x;">
<tr>
<td> This table has background image set which will repeat horizontally. </td>
</tr>
</table>
</body>
</html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-repeat: repeat-x;">
<tr>
<td> This table has background image set which will repeat horizontally. </td>
</tr>
</table>
</body>
</html>
Set the Background Image Position
Following is the example, which demonstrates how to set the background image positioned 150 pixels away from the left side
<html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-position: 150px;">
<tr>
<td> This table has background image positioned 150 pixels away from the left. </td>
</tr>
</table>
</body>
</html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-position: 150px;">
<tr>
<td> This table has background image positioned 150 pixels away from the left. </td>
</tr>
</table>
</body>
</html>
RECOMMENDED: Html-Phrase Tags
Following is the example, which demonstrates how to set the background image positioned 150 pixels away from the left side and 200 pixels down from the top.
<html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-position: 150px 200px;">
<tr>
<td> This table has background image positioned 150 pixels away from the left and
200 pixels down from the top. </td>
</tr>
</table>
</body>
</html>
<head>
</head>
<body>
<table style="background-image:url(/image/novapic.gif); background-position: 150px 200px;">
<tr>
<td> This table has background image positioned 150 pixels away from the left and
200 pixels down from the top. </td>
</tr>
</table>
</body>
</html>
RECOMMENDED: Html-Meta Tags
Set the Background Attachment
The background attachment determines whether a background image is fixed or scrolls with the rest of the page.
Following is the example, which demonstrates how to set the fixed background image.
<html>
<head>
</head>
<body>
<p style="background-image: url(/image/novapic.gif); background-attachment: fixed;">
This paragraph has a fixed background image.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="background-image: url(/image/novapic.gif); background-attachment: fixed;">
This paragraph has a fixed background image.
</p>
</body>
</html>
Following is the example, which demonstrates how to set the scrolling background image.
<html>
<head>
</head>
<body>
<p style="background-image: url(/image/novapic.gif); background-attachment: scroll;">
This paragraph has a scrolling background image.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="background-image: url(/image/novapic.gif); background-attachment: scroll;">
This paragraph has a scrolling background image.
</p>
</body>
</html>
Shorthand Property
You can make use of the background property to set all the background properties once. For example:
<html>
<head>
</head>
<body>
<p style="background: url(/image/ novapic.gif)" repeat fixed;">
This paragraph has fixed repeated background image.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="background: url(/image/ novapic.gif)" repeat fixed;">
This paragraph has fixed repeated background image.
</p>
</body>
</html>
Alright guys! that is it for this tutorial on Cascading Style Sheets backgrounds, feel free to drop your questions in the comment box below.
Don't forget to like our facebook page, also subscribe with us to get our latest tutorial posts delivered directly to your emails. Thanks and bye for now.