swirlingDervish Posted June 16, 2014 Share Posted June 16, 2014 Swirling noob here with another really basic headache for the gods of code: I'm learning pseudo classes and elements while trying to fade my body background image ONLY. I either end up fading everything (including text content) or nothing at all: CSS: #chgBack {background:#081132 url("../images/Fog2.png") no-repeat top center; background-size: 1290px 1300px; -moz-background-size:1290px 1300px; -webkit-background-size:1290px 1300px; margin:0px; padding:0px; } .fader:after { content: ""; opacity:0.5; filter:alpha(opacity=50); top: 0; left: 0; bottom: 0; right: 0; position:fixed; z-index:-1; } HTML: <body id="chgBack" class="fader" > <div class="fader" style="position:absolute; width:100%; height:100%;"> </div> ... <div id="testimos"> /* text element with lovely words over the background */ </div> ... </body> ...followed by a plaintive cry for help from a nesting baby noob! Thanks, all. Link to comment Share on other sites More sharing options...
swirlingDervish Posted June 16, 2014 Author Share Posted June 16, 2014 Oops, I did see one error of adding "class="fader" to body, but even after removing, still no go...... Link to comment Share on other sites More sharing options...
swirlingDervish Posted June 18, 2014 Author Share Posted June 18, 2014 No one has any ideas??!...please help. I'm trying both the class and elements version of applying this div and it's not working.... Link to comment Share on other sites More sharing options...
justsomeguy Posted June 18, 2014 Share Posted June 18, 2014 Do you have an example of this online? Link to comment Share on other sites More sharing options...
swirlingDervish Posted June 18, 2014 Author Share Posted June 18, 2014 Thanks, justsomeguy...um, yeah...http://siddhicenter.org/Inner/Space/Testimonials.htm. You need more CSS? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 18, 2014 Share Posted June 18, 2014 Why are you using the :after selector there? I'm confused about what you're doing, that div has no content in it, no background or anything. Hiding the div has no effect on the page. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 18, 2014 Share Posted June 18, 2014 You have to separate the background image element you wish to use opacity on from other elements, so only it will be affected <body> <div id="fader"> </div> <div id="testimos"> /* text element with lovely words over the background */ </div></body> #fader{background: url("http://siddhicenter.org/Inner/Space/images/kailasFog2.png") no-repeat center center / 100% 100%; position:fixed; top: 0; left: 0; right:0; bottom:0; z-index:0; opacity:0.5; filter:alpha(opacity=50);} #fader ~ * {position: relative; z-index: auto;} Link to comment Share on other sites More sharing options...
swirlingDervish Posted June 18, 2014 Author Share Posted June 18, 2014 Yeah, justsomeguy, guess I'm not really grasping the proper timing or syntax for use of pseudo classes and elements yet; 'scuse my noobiness while I learn...the "empty div" (background-image is in the CSS for the div) I was reading in a couple of tutorials, was to apply outside-of-DOM attributes, but I think dsonesuk is saying I can use regular ol' divs for an empty div... Thanks, dsonesuk, I'll try out and update. Any tips or links on understanding when I should use pseudo classes and elements?... Link to comment Share on other sites More sharing options...
dsonesuk Posted June 19, 2014 Share Posted June 19, 2014 With your original code try this. #fader:before {content: " "; background: url("http://siddhicenter.org/Inner/Space/images/kailasFog2.png") no-repeat center center;background-size: 100% 100%; /* safari has problem if included in shorthand*/ position:fixed; top: 0; left: 0; right:0; bottom:0; z-index:0; opacity:0.5; filter:alpha(opacity=50);} body * {position: relative; z-index: auto;} /*this should be placed at close to top else any element using position absolute will overridden and use this relative styling instead.<body id="fader">.....</body> This won't work for IE6 to 8, mind you i think my previous code position: fixed; is not supported either in IE6 which may not be problem, cause i think its had its day and put to rest. RIP IE6. Link to comment Share on other sites More sharing options...
swirlingDervish Posted June 19, 2014 Author Share Posted June 19, 2014 Hi, dsonesuk. Wow, I kno I need a selector lesson! Ummm, "#fader ~* {...}"? I kinda get "/" in its present placement, but...ok....help... Link to comment Share on other sites More sharing options...
swirlingDervish Posted June 19, 2014 Author Share Posted June 19, 2014 I should have refreshed first.... ...still? curious about those selectors from your first post... Link to comment Share on other sites More sharing options...
dsonesuk Posted June 19, 2014 Share Posted June 19, 2014 ~ = siblings elements * = of any kind. mind you you might just get away with first. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now