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

Collection of 200+ Free Joomla templates, support Joomla 3.9.x and Joomla 4 Listing of 300+ Best Free WordPress themes, WooCommerce compatible, Elementor supports!

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!

500+ Premium Joomla! and WordPress themes just $8.70/Month, Quickstart (dummy) package included, unlimited domains!

Hottest Summer Sale! Get 50% OFF 30% Off On All Purchases on Today. Coupon code: SUMMER2021 Check it out!
Hottest Summer Sale! Get 50% Off On All Purchases on Today. Coupon code: SUMMER2021 Check it out!