Search code examples
htmlcssbackgroundblogger

Making Blogger post and page background transparent

I need to get the area outlined in red in the image below completely transparent. I'm new to this HTML stuff, but I've tried searching for transparency and opacity in the HTML editing section and I don't seem to be able to find the correct bit to edit. If there's a simple CSS code someone could provide me with that would be even better.

I'm using the Picture Window theme on Blogger.

Thanks :)

enter image description here

Solution

  • The CSS I would use is background-color: rgba(0,0,0,0); (red,green,blue,alpha)

    for alpha, 0 is transparent, 1 is solid, so 0.5 would be halfway transparent

    If you are unsure where to put this css, you'll need to identify the div; you can use developer tools in most popular browsers to find the ID or Class of the div; right click on it and choose "Inspect" or "Inspect element" or similar.

    EDIT: The div you need to alter is <div class="content-outer">....</div> add the style background:none; to remove the existing background.

    <div class='content-outer' style="background:none;box-shadow:none;">
    <div class='content-cap-top cap-top'>
    <div class='cap-left'/>
    <div class='cap-right'/>
</div>

    see here

    If you want to ensure the box-shadow (fuzzy outline) does not appear on older browsers, see https://www.w3schools.com/cssref/css3_pr_box-shadow.asp for browser specific css. For example for older versions of chrome you would also add -webkit-box-shadow:none;