Adding background color and image is fun and easy in CSS. In this tutorial, we are showing you how to add background color and image in CSS.
Steps to add background color and image in CSS
1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available in any Windows PC. Open notepad and type the following code:
<html>
<head>
<title>CSS tutorial – 3</title>
<link rel=”stylesheet” type=”text/css” href=”style/style.css” />
</head>
<body>
<h1> Adding background color and image</h1>
</body>
</html>
And then save the file as .html (eg: tut3.html).
Here,
<link rel=”stylesheet” type=”text/css” href=”style.css” /> will link the stylesheet that we are going to create.
2. Next, in the same directory (folder), create another folder named css and create new css file named style.css. To do that, open notepad and save it as style.css
3. Next, open the file style.css and type following code:
body
background-color: #c0c0c0;
And then save the file. Make sure it is saved as .css
This will add background color. Please note, instead of using hex code, you can also use text like red, blue etc. View more about hex color at – http://en.wikipedia.org/wiki/Web_colors
4. Again to add background image, first save the images in the same folder where your HTML file is situated and then open the css file that you have created in step-2.
5. Type the following code in the same css file i.e. style.css
body
background-image: url(‘../bg.png’);
background-repeat: repeat-x;
background-attachment: fixed
Add this below background-color: #c0c0c0;
Here, background-image will insert a background image. Make sure your background image is in the same folder or if its in a different folder then give the full path. We type ../bg.png because the image is located in the root folder that is outside css folder.
background-repeat controls how the background image needs to be repeated. By default, if the background image size is small then it will get repeated through out the page (both x axis and y axis) but if you want to control this, then you can use background-repeat property.
There are four possible values for background repeat.
background-repeat: repeat-x This makes background image repeat horizontally only.
background-repeat: repeat-y This makes background image repeat vertically only.
background-repeat: repeat This makes background image repeat both horizontally and vertically. This is the default behavior.
background-repeat: no-repeat This wont repeat the image at all. Only one background image is shown.
background-attachment is used to make a background picture fixed or scroll along with whole page content.
There are two values for background-attachment.
Background-attachment: scroll This will make background image scroll along with the page content.
Background-attachment: fixed This will lock background image so it wont scroll.
This completes our CSS tutorial on how to add background color and image in CSS. If you’ve found this CSS tutorial helpful, please comment below.
The post How to Add Background Color and Image in CSS appeared first on Web Design Blog | Magazine for Designers.
How to Add Background Color and Image in CSS
Geen opmerkingen:
Een reactie posten