It's time to create new or re-design your websites to bring it to the next level.

Check out Top 110+ Best Free Joomla! templates Listing of 300+ Best Free WordPress themes

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.

step-1-create-html-multiplebg

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

step-2-create-css-multiplebg

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.

step-3-prepare-bg-multiplebg

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.

step-4-type-css-multiplebg

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.

Download

From: http://www.webdesigndev.com/

Are you Web Freelancer or Web Design Company? Join our Club and Access our Resource!

Access 500+ PRO Premium Joomla! and WordPress themes with $19,200 just $149, Quickstart Package included!

Get 60% Discount for Membership plan!

Access Life-time All-In-One Membership with 500+ Premium WordPress themes and Joomla templates just $159.60 (instead of $399) after discounted! Life-time Access, Download and Support, One-time Payment, No Renewal. Coupon code: REMOTEWORK

Join All-In-One Club with 60% OFF on today!

We’re with you! We're offering 60% Discount on all purchases due to the impact of COVID-19! Code: REMOTEWORK More Details
We’re with you! We're offering 60% Discount on all purchases due to the impact of COVID-19! Code: REMOTEWORK More Details