CODEWITHSUNDEEP
htmlcss
Ohhh
Ohhh

Reputation: 435

how to display text background-color in the picture

I would like to display the background-color of the text in the picture without changing the position. How can I do that?

<div id="pic" ><img src="c.jpg" width="200" height="200"></div>
<p id="text"> ABC</p>

<style>
    #text {
        background-color:#ff0000;
        margin-top: -50px;
        position: static;

    }
</style>

enter image description here

Upvotes: 0

Views: 47

Answers (4)

Adam Whitney
Adam Whitney

Reputation: 106

Just change from static to relative.

<style>
    #text {
        background-color:#ff0000;
        margin-top: -50px;
        position: relative;
    }
</style>

And if you want to be doubly sure, z-index: 1;

Upvotes: 0

Andie2302
Andie2302

Reputation: 4887

Use position: relative; instead of position: static;

Upvotes: 0

Kodithic
Kodithic

Reputation: 170

Change position: static to position: relative

Upvotes: 0

vesuvious
vesuvious

Reputation: 2753

This is actually an ordering issue, the picture is above the background color, the text is above the picture.

See this answer for ways this was accomplished: (CSS) How position text (with background color) over <img> tag without absolute positioning

Upvotes: 2

Related Questions