Making the image background semi-transparent

Posted in: Newspaper
Post count: 7

I am keen to make the photo background semi-transparent on my Newspaper website – so that there is a 50% gray overlay rather than the solid white default page. How do you do this?

  • This topic was modified 10 years by markn.
Post count: 22421

Hello,
Please provide more details to what you want transparent. The background image or the page/post content?
You can use css to do it.
For example if i want the background to be visible through the main content I would use css like so:
.post, .td-main-content-wrap{
background-color: rgba(255, 255, 255, 0.5)!important;
}

I hope this helps.
Thanks.

Post count: 7

That’s great – that’s what I mean, thank you. I notice, though, that the transparency doesn’t also appear in the main body on posts – it’s still a solid white block that’s shown. How would I update the CSS to include that too?

Post count: 22421

Hello,
It actually depends on the post template used. Different post templates use different containers and some of them need to be targeted with css. Please run a test on the templates you use to see which ones work with the css and which ones do not so i can provide the code for the ones that do not work.
Thank you!

Post count: 7

Thanks – it’s the default post template that doesn’t show the semi-transparent image background. Please provide the code so it shows through? Thanks.

Post count: 22421

Hello,
I tested the default post template with the code i provided ant it seems to display fine. Please provide a link to a post that does not get the transparency after you apply the code in the theme panel. (provide a link so I can inspect it.)
Thank you!

Post count: 7

Please see the link below for an example of a page that doesn’t show the semi-transparent background – it’s a white block around the body copy…

http://ds9864.dedicated.turbodns.co.uk/wordpress/2016/02/12/thick-fog-creates-stunning-scenes-in-burnham-on-sea/

Post count: 22421

Hello,
The specific post has a container over the other one so the transparency has to be different for it as it will have a visual impact as they are 2 containers overlapping.
Try this code:
.single-post .td-ss-main-content{
background-color:red!important;
}

This will be the case with overlapping containers. Imagine having 2 semi-transparent pieces of glass. A single glass will have much better visibility than the 2 pieces put together.
I hope this helps.
Thanks.

Viewing 8 posts - 1 through 8 (of 8 total)
The forum ‘Newspaper’ is closed to new topics and replies.