How to make background transparent?

Community Forums Forums Design Tips and Tricks How to make background transparent?

This topic is: resolved

Tagged: 

This topic contains 9 replies, has 2 voices, and was last updated by  David Chu 1 year, 4 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #39753

    deck2deck
    Participant
    Post count: 14

    I’m using the Metro Theme and would like to make the white background transparent so that the background image will show through.

    I believe the code I need is     background-color: transparent;

    but I have no idea where on the stylesheet to put it.  My three best guesses didn’t work so I’m asking for help.

    Also, is there a way to control the degree of transparency (i.e. assign it a number like one would do in Photoshop)?

    Thanks!

     

    #39873

    David Chu
    Participant
    Post count: 1373

    Hi,
    It’s #wrap. But depending on your background image, your text may then become unreadable due to lack of contrast. Then you’re stuck with styling a whole bunch of things to use a contrasting color. You could try it.

    For partial transparency, opacity is the thing. I tried leaving the white background and the following setting. It made an interesting effect, but still compromised readability. Any lower setting, such as 0.5, was very transparent and extreme.

    [css]
    #wrap {
    opacity: 0.9;
    }
    [/css]

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #39906

    deck2deck
    Participant
    Post count: 14

    Awesome!!  Thank you, that worked beautifully.  I used .8 and that gave me the effect I was going for.

    Do you know if it’s possible to change the opacity on a per-page basis?  i.e. have one level for the front page, and a more opaque effect on all the subpages?  Or maybe have a different background pic on each subpage so that it’s not quite as distracting as the front page?

    I appreciate your willingness to help.

    #39939

    David Chu
    Participant
    Post count: 1373

    :-)

    To a degree, yes. Look at your HTML for a particular page. You should see a class on the BODY that is particular to that page (not the generic ones, like “page”) There would be a number, something like “page-id-15″. Then you just make your CSS more specific like this. You can see that I have the specific page class first, because BODY contains #wrap.

    [css]
    .page-id-15 #wrap {
    opacity: 0.8;
    }
    [/css]

    As you edit a Post or Page, in Genesis you can also add your own BODY class right near the bottom, so that’s yet another way! (you still need CSS, like above)

    It’s a very handy principle to remember for doing things on particular pages. I’ve worked with designers you want, for instance, a different color for every page. :-)


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #46608

    deck2deck
    Participant
    Post count: 14

    Thank you SO much for your help so far!!  This has all worked beautifully (I used the custom body class on each page to adjust to suit) and it all looks great.

    I have one new issue, however: I discovered that when I insert an image onto any of these transparent pages, the image is transparent as well!  That does cause a problem for me.

    How to fix?  I would like the background transparent — as it is now — but any images added to keep their original 100% opacity.

    Thanks for any help you can provide!  I’m learning a lot and I appreciate your assistance!

    #46662

    David Chu
    Participant
    Post count: 1373

    Hi,
    Glad that helped. You have great faith in my psychic powers – you’re not giving me a link to look at. :-) That being said, my psychic powers are sometimes adequate.

    Here is a somewhat blunt command that may help. Notice how it’s like the other command, but even more precise, to only include images inside the #wrap for that particular page, and it changes the opacity:

    [css]
    .page-id-15 #wrap img {
    opacity: 1;
    }
    [/css]

    As you learn more about CSS, you’ll see how you need to use more classes, ID’s, and selectors to get something precise.

    No idea if that will do it without seeing it, but you could give it a go.

    Cheers, Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #47376

    deck2deck
    Participant
    Post count: 14

    Greetings one more time!!

    Unfortunately, that idea didn’t work. I’m sure I probably did something wrong; I’m just learning CSS and a lot of it doesn’t make sense to me.

    I did experiment with it all week, trying different scenarios and locations with this code but couldn’t make it work. I did succeed in making my home page disappear!! LOL

    Anyway, I’ve started over and changed themes to see if that would make it work and that didn’t either, so I’m asking for your help one more time. Thank you so much for your patience! Maybe someone else will see this post and will benefit from it as well.

    I’m now using Landscape (which I like better anyway). Here’s a link: http://deck2deck.com/wp/?page_id=8

    Thanks!!

    #47462

    David Chu
    Participant
    Post count: 1373

    Got it – it probably requires a bit of research, and maybe even a hack. So I’m out, at least for free help.

    Good luck.


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #47664

    deck2deck
    Participant
    Post count: 14

    OK, thanks for trying. I’m not adverse to paying for help, but I got burned last month with paid help through this forum (I think it was actually a Copyblogger employee!) so now I’m reticent to go that route. I want to try it this way first; if I can’t find a fix then I may come back to you. Do you have a way for me to IM you?

    Thanks again for trying! I will repost as a new issue.

    #47668

    David Chu
    Participant
    Post count: 1373

    Wow, that’s kind of scary. Sorry to hear that. To contact me, you could follow my link below and then use my contact form.

    FYI: I should add a little factoid I found while looking at your problem. The opacity thing works on DIV’s, and I’ve never had any reason to use it any other way before. It may not work on other HTML bits, or at least nested ones! So if I were working on this, I’d look into an alternative solution.

    To put it another way – you’re asking for something non-standard. And you may want to think about how badly you need it before shelling out. :-)

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.