Transparent Post Background

  • eraser851

    (@eraser851)


    10 years, 3 months ago

    Hello,
    I have an issue I’m trying to resolve and nothing seems to be working!
    Firstly, the site is: http://www.spinitlikeapro.com
    The theme I’m using is called Toivo Lite.

    What I want to do is make that white box on the main page (behind the “Available Now” and the video) to be translucent so the background image can be seen through it.

    So far, I’ve almost had luck with:

    div.entry-inner{
background-color: rgba(255, 255, 255, 0.5);
}

    While that code seems to adjust the color of the box (excluding about 50px on the bottom), it does not affect the opacity.

    Here’s an example image of what I get when I test it using rgba(0, 0, 0, 0.5);.
    http://i.imgur.com/Jgg8pQr.jpg

    Can anyone offer some advice?
    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Evan Herman

    (@eherman24)

    10 years, 3 months ago

    If you have an image set as the background-image, you can’t lower the opacity of the image. It’s a limitation to CSS.

    You’ll want to adjust the opacity in photoshop, before you export the image – and save it as .png with transparency enabled.

    A few workarounds exist, but it’s going to involve some custom coding on your end as it can’t be done the way you are attempting.

    External Resource:
    https://scotch.io/quick-tips/how-to-change-a-css-background-images-opacity

    Thread Starter eraser851

    (@eraser851)

    10 years, 3 months ago

    Thanks for the response, Evan.
    I’m not sure I follow, though.

    I’ve attempted to replace the white background of the post to a transparent PNG at the same resolution using.

    div.entry-inner{
	background-image: url"/../transparent_entry-inner.png";
}

    But that doesn’t seem to do anything.

    Evan Herman

    (@eherman24)

    10 years, 3 months ago

    How are you initially adding the background image? You should simply chage out the image name, with the new transparent image. Theme option? Custom Code? Did you upload the image to the media library, or to a directory in your theme? Did you add the code for the background image yourself, or is this built into the theme?

    Thread Starter eraser851

    (@eraser851)

    10 years, 3 months ago

    The background image (golf ball on the grass) was added using the theme’s customizer. But there’s no option to change the white box that blocks it.

    Evan Herman

    (@eherman24)

    10 years, 3 months ago

    Upload the new transparent image there then, to swap out the existing image with the transparent image.

    Thread Starter eraser851

    (@eraser851)

    10 years, 3 months ago

    I don’t want to replace the background image, just the white box.
    I made a quick mockup of what I want it to look like

    View post on imgur.com

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Transparent Post Background’ is closed to new replies.