Any hack how to make #wrapper opaque but post images solid?

use a background PNG image for the #wrapper that is opaque then everything above it (in the layer/segment) will stay the same and not use the filter/opacity from the css.

@frumph Thank you for the response! Yes, was considering that too, but was still hoping for some fancy css hack.. Well, will play with PNGs then.
Thanks again!

Oh my, i can’t do it, spent hours ??

None of my versions work.. Either fully transparant wrapper, of white wrapper.
I assume I’m giving wrong url..?

My Parent Theme css for #wrapper is:

#wrapper {
	margin: 0 auto;
	width: 940px;
}

#wrapper {
	background: #fff;
	margin-top: 20px;
	padding: 0 20px;
}

My Child Theme css for #wrapper is:

#wrapper {
	background-image: url('img/opaque03.png');
}

And opaque03.png is a 1 pixel semi-transparant png created at https://www.1x1px.me/
I’ve created plenty of them different opacity, but none helps, so i guess files are not the issue. Says “alpha” at PNG ‘save” menu.

In my FileZilla path to file is Root folder/web/img/opaque03.png
wp-content, wp-config etc files are in “web” folder as well..

Am i giving wrong path to my .png?
Or wrong css?

Please, help..

If the .css file is in web/ you’re not ..

otherwise your path should be /img/opaque03.png

The path is relative to where the .css file you’re editing is. just put a / in front of /img and try it out

Dear Frumph, unfortunately I’m a complete dummy here…

my CSS file is in root->web->wp-content->themes->twentyten-child
And PNGs are in root->web->img
I tried putting PNG into /twentyten-child folder and giving URL as simply (‘opaque03.png’) and nothing.. white wrapper.
Please, be so kind to give me a “for dummies-dummies” advice..

Dear Iesnaya, I did already.

Without being able to have a link to view what you’re doing though; it seems it might be a bit harder to assist you on this.

Is it difficult for you to add a / before the img/opaque03.png path ?

Sorry if “dear” sounded with irony, i meant it.. As tech community is the relict where people actually help other people…

Thank you very much for your help.

I typed in

#wrapper {
	background-image: url('a /img/opaque03.png');

}

but I assume I again misunderstood you.. No result so far..

that would be

background-image: url('/img/opaque03.png');

No idea why you’re adding the a

However, I see it’s fine in the CSS.. the problem I see now is that you are overriding the background-image but not noticing that there’s still a background color there

#wrapper {
        background-color: Transparent;
	background-image: url('/img/opaque03.png');
}

It also appears the opaque03.png is wayyyy too opaque

Frumph, thank you. I tried that, and now indeed files are found.. Tried with different .pngs (downloaded semi-transparent inch by inch as well). For some reason it treats them all as solid image, no transparency… Though when I open bigger .png it’s definitely transparent.. Now wrapper is solid grey color, though PNG is “black transparent”, and i clearly good transparency in Preview..

i have opaque2.png opaque03.png opaque50.png opaque80.png
transpBlack10.png in that folder

background-color: Transparent!important;

i’m not seeing your background-color: transparent; come up

If you add the transparent line and switch to this:

[removed by poster because of private URL]

By using one of my transparent png’s you can tell it’s the transparent PNG you are using.

Fruuuuumph!!!!! THANK YOU MAN!!!!!! Yay!!!! %)) Working… wow.. that is something i would never guess even closely, though saw these suspicious “important” values in CSS..

THANK YOU.

Peaceful sleep is finally guaranteed..

Thank you for your patience. ??

!Important; means to ‘not override by anything later in the parsing by CSS’

Since CSS is parsed by reading from the first that is shown then goes down the file, anything after the original is called “overriding” so adding the !Important; means not to have anything else override it