How to create an image overlay?

  • In the [spammy link removed] homepage there is a common thing in web design – a transparent black overlay over a hero image that helps in the readability of the text on the image.

    I know how to do that in native web development. Question is – how do you do that in WP?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    There are a couple of ways.

    1. Put your text in a <span> and float it over the image. Put a background color on the span and some padding so the text sites in a colored rectangle.

    2. Don’t assign a background color, but use a text-shadow to make the floated text readable when floated over the image.

    Both would be done in CSS (with a bit of supporting HTML).

    Thread Starter PressingWord

    (@pressingword)

    Thanks for the reply Steve!

    My CSS chops are a bit rusty. Do you mean something like this?

    <span>mytext</span>

    span {
    background-color: rgba(255, 0, 0, 0.3);
    }

    My only question is – how do I make sure the span element covers the background image perfectly, and more importantly – responsively?

    P.S: Why was the link removed?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    The HTML would be

    <div id="herestheimage"><img src=xxxxx>
<span class="box_it">mytext</span>
</div>

    The CSS

    span.box_it {
background-color: rgba(255, 0, 0, 0.3);
padding:1em;
height:100%;
width: 100%;
}

    It would be a lot easier if we had a site on which to test this CSS, but that’s sort of the model.

    I removed the link because it was irrelevant.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to create an image overlay?’ is closed to new replies.