CSS Background Styling with Examples: CSS is designed in such a way that we can use it to give reasonable effects to our web page’s background. Let’s start with a background color. There are different ways by which we can specify the background color of our page. These are by:
CSS Background Color
1. Name: In this case, the color name is given directly. e.g. “green”
2. RGB: In this case, an rgb value is used instead. e.g. “rgb(140, 100, 167)”
3. HEX: In this case, the hex value is used. e.g.”#CC9933″
CSS Background Color Example
Now let’s show an example of this. Switch to your Notepad and try this code below:
<html>
<head>
<style type="text/css">
h2 {background-color:green;};
p{background-color:#CC9933;}
div {background-color:rgb 140,100, 167);}
</style>
<body>
<h2> This is CSS Class</h2>
<p>My CSS Lesson</p>
<div> My Text Will Be Here</div>
</head>
</body>
</html>
CSS Background Color Example Output
If this is what you got after typing in the code above, then you got it right. If not, please check your code again and compare it with mine to see where you are wrong. Please, I won’t advise you to be copying and pasting; that won’t make you learn fast.
CSS Background Image
With a CSS background image, one can set a background image by simply using a CSS code to call up your image in the folder it has been saved. This will save you from using so many tables, and of course, make your page lighter.
CSS Background Image Example
The background image for a page can be set like this:
{background-image:url ('example.jpg');}
When setting a background, you have to specify the file name in which you have used in saving the image in the place where I typed “example.jpg“. Note that you must use the “.jpg” extension. Ensure you use the extension you use in saving the image, but avoid saving with “.bmp” extension as it might not be supported by the browser.
Declaration will be used for background images as background: url(../images/4.png);.
Such as body {background: url(../images/4.png);}
CSS Background Image Types
In the use of images as background, there are several other things to be mentioned in the Declaration. These are the ones
- Background Repetition
- Background Position
- Background Attachment
Background Repetition
Background Repetition is used to indicate how often background images are used. If the image is to repeat across the whole background then Declaration will be background-repeat: repeat. If the image is to be used only once, then Declaration will be background-repeat: no-repeat; If the image needs to be repeated repeatedly with the X-axis, Declaration will be background-repeat: repeat-x; If the image is to be repeated repeatedly with the Y-axis, Declaration will be background-repeat: repeat-y; Such as body {background:url(images/4.png);background-repeat: repeat-y;} If body {background: url(images / 4.png); } If Declaration is done then the image will be repeated repeatedly throughout the whole background.
Background Repetition Table
| background-repeat: repeat. | To repeat the image across the background |
| background-repeat: no-repeat | To repeat the image only once |
| background-repeat: repeat-x | To repeat the image repeatedly with X-axis |
| background-repeat: repeat-y | To repeat the image repeatedly with Y-axis |
Background Position
Background position is used to indicate where the background image should be located.
If the image is to be left then Declaration will be background-position: left; Here the left, right, center, bottom, top, etc. can be. If the image is left from left to right then Declaration will be background-position: top left;
Background Position Table
| background-position: left | To declare the image position. Replace the value left to the right, bottom, top, center as per your requirement |
| background-position: top left | To define the particular image position. |
Background Attachment
Background attachment is used to reveal whether scrolling along with other elements of background image pages. Declaration to scroll along with other elements of the background image page will be background-attachment: scroll; Generally, scrolling is done with other elements of the background image page if nothing is specified. The declaration will not be scrolling along with other elements of the background image page; background-attachment: fixed;
Background Attachment Example
<html>
<head>
<title> Selectors </title>
<style>
body {background: url(../images/bg.png); background-attachment: fixed;}
{background: # COC; colour: #fff; margin-left:50px;)
h1 {margin-top: 50px; colour: # C00}
</style>
</head>
<body>
<h1> www.tutorials.freshersnow.com </h1>
<p id "post1">
The tutorials.freshersnow is one of the best tutorial website. <br />
The tutorials.freshersnow is one of the best tutorial website. <br />
The tutorials.freshersnow is one of the best tutorial website. <br />
The tutorials.freshersnow is one of the best tutorial website. <br />
The tutorials.freshersnow is one of the best tutorial website. <br />
The tutorials.freshersnow is one of the best tutorial website. <br />
The tutorials.freshersnow is one of the best tutorial website. <br />
The tutorials.freshersnow is one of the best tutorial website. <br />
</p>
</body>
</html>
Background Attachment Example Output
Open a Notepad and enter the code & add url path and save the file from the File menu by clicking on Save as type: Save as type: All files, save the index.html file with Mozilla Firefox or Google Chrome and check.