CODEWITHSUNDEEP
csshtmlbootstrap-4
Akansha Gautam
Akansha Gautam

Reputation: 77

How to add text below your background image?

enter image description here I want to set the background image which will display at complete viewport mode. I have achieved this through body tag.

body { background-image: url(/picture.jpg); }

I also want to add text below the background image which will come at another section in the same webpage. But since I have used background image using body tag, I couldn't able to write further texts after the image. How could I achieve it? Please help. Thanks

Upvotes: 0

Views: 1396

Answers (2)

Eggii
Eggii

Reputation: 91

<body>
    <div class="image">
        <img></img> 
    </div>
    <div class="text">
        <!-- Your required text comes here -->
    </div>
</body>
<style>
    .image{ 
    width: 100%; 
    height: 100%;"
}
img{ 
    some style
}
.text{ 
    some style
}

</style>

Upvotes: 0

emptyjayy
emptyjayy

Reputation: 544

A good idea would be slightly modifying your HTML structure.

<body>
    <div class="content-wrapper">
        <!-- All your HTML goes here -->
    </div>
    <div class="text-wrapper">
        <!-- Your required text comes here -->
    </div>
</body>

Then you can modify your CSS.

body .content-wrapper { background-image: url(/picture.jpg); }

Hope that helps.

Upvotes: 1

Related Questions