Archived topic

White semi transparent box with text over featured image

1 reply · Started by Steig on April 14, 2017

Viewing posts 1–2 of 2

April 14, 2017 at 8:40 pm #306118

Hello,

I've set a featured image and made it full screen. Then in the page header, I've put text, which doesn't show real well because of the background image.

I've seen other sites fix this by putting a white semi transparent box behind the text. It allows the text to be seen better yet allows the background image to be seen.

How can I do this?

Thanks
Steig

April 14, 2017 at 9:34 pm #306129

In your Page Header content, wrap your text in a div:

<div class="semi-white-bg">
    Your text in here
</div>

Then add CSS:

.semi-white-bg {
    background-color: rgba( 255,255,255, 0.5 );
    padding: 20px;
}

This archived topic is closed to new replies.

Start building better websites today.