WordPress.org

Forums

Need transparent background but a solid content area (15 posts)

  1. redlodgeales
    Member
    Posted 2 years ago #

    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

  2. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

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

  3. redlodgeales
    Member
    Posted 2 years ago #

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

  4. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

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

  5. redlodgeales
    Member
    Posted 2 years ago #

    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

  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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 :) !

  7. redlodgeales
    Member
    Posted 2 years ago #

    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?

  8. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You need quotes around the url:

    background-image:url("http://redlodgeales.net/wp-content/uploads/2012/12/background50.png");
  9. WPyogi
    Forum Moderator
    Posted 2 years ago #

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

  10. redlodgeales
    Member
    Posted 2 years ago #

    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.

  11. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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.

  12. redlodgeales
    Member
    Posted 2 years ago #

    Still nothing happening...

  13. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    Remove -image
    I.E

    background:url(http://redlodgeales.net/wp-content/uploads/2012/12/background50.png) !important;
  14. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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;
  15. redlodgeales
    Member
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic