Fading a divs bg image but not the content inside

[schwim]

Hi there everyone!

I’m trying to create a div with a random background image that is faded and a logo image placed inside that does not have the faded effect. Unfortunately, I’ve only been able to figure out how to apply the effect to everything in the div.

http://dealifier.com/index.php?action=offline

I’d appreciate any help you may be able to provide to getting the desired effect.

Thanks for your time!

[dresden_phoenix]

Yup , opacity is a tricky thing in CSS. Had the background been a solid color, and not an image, you could easily accomplish the effect using RGBA(). But since that’s not the case you might need to:

USE A EXTRA ELEMENT AN ABSOLUTE POSITIONING.

in this example I am using a pseudo element.

			.eg {
 				position: relative;
 				/* do NOT try to give div.eg a background, as it will end up covering the pseudo element*/
			}
			.eg:before {
				position: absolute;
				background: url('file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/IMG954638.jpg') no-repeat;
				top:0;
				bottom:0; 
				right: 0;
				left: 0;
				content: '';
				opacity: .5;
				z-index: -1;
 			}


		<div class="e.g.">content...</div>

BUT…

if the main background is a solid color, that is to say the containers background is a solid color that you can match, you could do this:

 			.eg {
 background: -moz-linear-gradient(left, rgba(248,80,50,0.5) 0%, rgba(231,56,39,0.5) 100%), url('file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/IMG954638.jpg') no-repeat;
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,80,50,0.5)), color-stop(100%, rgba(231,56,39,0.5))), url('file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/IMG954638.jpg') no-repeat;
 background: -webkit-linear-gradient(left, rgba(248,80,50,0.5) 0%, rgba(231,56,39,0.5) 100%) , url('file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/IMG954638.jpg') no-repeat;
 background: -o-linear-gradient(left, rgba(248,80,50,0.5) 0%, rgba(231,56,39,0.5) 100%) , url('file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/IMG954638.jpg') no-repeat;
 background: -ms-linear-gradient(left, rgba(248,80,50,0.5) 0%, rgba(231,56,39,0.5) 100%), url('file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/IMG954638.jpg') no-repeat;
 background: linear-gradient(to right, rgba(248,80,50,0.5) 0%, rgba(231,56,39,0.5) 100%), url('file://localhost/Volumes/Macintosh%20HD/Users/rmessina/Desktop/IMG954638.jpg') no-repeat; 	
 		}

the vendor prefixes make it look scarier than it is. Essentially am creating solid color bg image (that matches the main BG color) from a CSS gradient and then overlaying it over the logo image. If you don’t feel comfortable using CSS gradients, you could just do a single pixel semi transparent PNG instead; of course that would mean having to use an image editor, etc… But the principle is the same.

hope that helps.

[schwim]

I think I’ve implemented it as you explained. The backround is faded, so thanks a bunch!

If I can ask another questsion, something I’ve done to the CSS has caused a scrollbar to appear both vertically and horizontally but I would like the page to simply fit whatever screen it’s seen on. Would you know how I can make that happen?

[ronpat]

@schwim

something I’ve done to the CSS has caused a scrollbar to appear both vertically and horizontally

culprits

.offlinecontainer {
    width:100%;
    height:100%;
}

@schwim

I would like the page to simply fit whatever screen it’s seen on. Would you know how I can make that happen?

See if some of these ideas work for you.

How to position a div block in the middle of the page?

[coothead]

Hi there schwim,

here is another example for you to try…

[code]

untitled document #outer { position:relative; width:70%; padding-top:39.375%; /* width*aspect ratio */ margin:auto; background-image:url(/images/background/_0020_mountains.jpg); /* aspect ratio 0.5625 */ background-size:contain; } #inner { position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,1); animation:fadein 5s 1s forwards; /* name, duration, delay, stop */ } #inner img { display:block; width:80%; margin:10% auto; } @keyframes fadein { from { background-color:rgba(255,255,255,1); } to { background-color:rgba(255,255,255,0); } }

[/code]

coothead