WordPress.org

Support

Support » Themes and Templates » Need transparent background but a solid content area

Need transparent background but a solid content area

  • I’m having an issue getting the images I add to my content areas to not take on the opacity I have set for the background. How can I add images to my content area without them having opacity characteristics? I’ve read some other threads on this issue, but can’t seem to pin where I’m going wrong. Here is the site and page I’m having issues with… http://redlodgeales.net/?page_id=24

    Thanks

Viewing 14 replies - 1 through 14 (of 14 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Use a translucent image, with the opacity you want. Then have that image repeat as a background-image (in CSS).

    Sorry, are you saying to use a translucent image as my overall background or the images I want to add to my content area?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Which ever element you’re trying to apply opacity to, instead use a background image that has opacity.

    OK, I’ve made a background image with an opacity of 50%. I’m struggling to find where in the pinboard theme, do I add this image? Would it be in the #wrapper or #body? thanks again

    WPyogi

    @wpyogi

    Forum Moderator

    Looks like you would want that to be in the wrapper div — if that’s where you want the opacity to be. Try it and see if it does what you want — you can always take it out 🙂 !

    I tried putting the background-image into the wrapper, but nothing seemed to happen. Here is what I have…

    #wrapper {
    position:relative;
    max-width:1140px;
    margin:0 auto;
    box-shadow:0 0 18px rgba(0, 0, 0, .4);
    background-image:url(http://redlodgeales.net/wp-content/uploads/2012/12/background50.png);
    overflow:hidden;
    }

    Does this look right or am I off somewhere?

    WPyogi

    @wpyogi

    Forum Moderator

    You need quotes around the url:

    background-image:url("http://redlodgeales.net/wp-content/uploads/2012/12/background50.png");

    WPyogi

    @wpyogi

    Forum Moderator

    Actually, the problem may also be that it is getting overwritten by a background style in your header (internal CSS).

    I’ve added the quotes and still nothing. I think you’re right that it’s being overwritten by something, but I don’t have a clue as to what or how to bypass it.

    WPyogi

    @wpyogi

    Forum Moderator

    No problem, try adding this to that line of CSS:

    background-image:url(http://redlodgeales.net/wp-content/uploads/2012/12/background50.png) !important;

    That makes the CSS override any other styles “competing” for that element style.

    Still nothing happening…

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Remove -image
    I.E

    background:url(http://redlodgeales.net/wp-content/uploads/2012/12/background50.png) !important;

    WPyogi

    @wpyogi

    Forum Moderator

    You also need to set that image to repeat:

    background-image:url(http://redlodgeales.net/wp-content/uploads/2012/12/background50.png) repeat left top !important;

    That worked out! Is the process the same to make the menu and footer transparent also? I liked the look of everything being transparent on the page, but i didn’t want the background bleeding through new photos I post, if that makes any sense.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Need transparent background but a solid content area’ is closed to new replies.