Sometimes, you may want to use more than one background in your page. For example, you may want one background for one paragraph and another background for another paragraph. Follow the steps provided in this tutorial to add more than one background image with CSS.
Steps to add more than one background image with 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 – 4</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>
<body>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</body>
</html>
And then save the file as .html (eg: tut4.html).
Here, <link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create. Also, you can use any text inside those p tags.
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, prepare two different background images. Make sure you save those images in the same folder where your HTML file is situated and then open the css file that you have created in step 2 of this tutorial.
4. Type the following code in the same css file (in your style.css or whatever you named it as)
body
background-image: url(‘../mainbg.png’);
p
background-image: url(‘../bg1.jpg’);
Here,
body
background-image: url(‘../mainbg.png’);
will insert a background image in the whole body.
p
background-image: url(‘../bg1.jpg’);
will insert a background image on a paragraph only.
This completes our tutorial on how to add more than one background image with CSS. If you’ve found it helpful, please do leave a comment below.
The post How to Add More Than One Background Image with CSS appeared first on Web Design Blog | Magazine for Designers.
How to Add More Than One Background Image with CSS
Geen opmerkingen:
Een reactie posten