How to make background transparent?

[deck2deck]

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!

 

[David Chu]

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.

#wrap {
  opacity: 0.9;
}

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[deck2deck]

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.

[David Chu]

🙂

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.

.page-id-15 #wrap {
  opacity: 0.8;
}

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

[deck2deck]

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!

[David Chu]

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:

.page-id-15 #wrap img {
  opacity: 1;
}

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

[deck2deck]

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

[David Chu]

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

[deck2deck]

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.

[David Chu]

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

[Author]

Posts