WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. redlodgeales
    Member
    Posted 1 year 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
    Posted 1 year 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 1 year 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
    Posted 1 year ago #

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

  5. redlodgeales
    Member
    Posted 1 year 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
    Volunteer Moderator
    Posted 1 year 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 1 year 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
    Volunteer Moderator
    Posted 1 year ago #

    You need quotes around the url:

    background-image:url("http://redlodgeales.net/wp-content/uploads/2012/12/background50.png");
  9. WPyogi
    Volunteer Moderator
    Posted 1 year 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 1 year 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
    Volunteer Moderator
    Posted 1 year 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 1 year ago #

    Still nothing happening...

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    Remove -image
    I.E

    background:url(http://redlodgeales.net/wp-content/uploads/2012/12/background50.png) !important;
  14. WPyogi
    Volunteer Moderator
    Posted 1 year 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 1 year 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