Attempting to split color in a <div> then place a transparent PNG image over the colors

GEMCC
GEMCC used Ask the Experts™
on
Hello,

I am trying to split color in a <div> then place a transparent PNG image over the colors:

background: linear-gradient(to bottom, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 1.0) 50%);
background-image:url(../images/header.png);

or

background-image:url(../images/header.png);
background: linear-gradient(to bottom, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 1.0) 50%);

The latter of the 2 overrides the former.

Please advise.

Thank you,

Don
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
You can't actually do that with just the background.  When you set a gradient background (linear, radial etc), those are actually implemented by the browser as background-image, not background-color.

Best approach would probably be to use a :before or :after tag with the background image applied to that.


#element { position:relative; background: linear-gradient(to bottom, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 1.0) 50%); }
#element::before { position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(../images/header.png); }

Open in new window

Author

Commented:
Is this what you are saying:

#header{
   position:relative; background: linear-gradient(to bottom, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 1.0) 50%);
	color:#FFF;
	font-size:18px;
	height:100px;
	padding:20px 20px 20px 20px;
    position:fixed;
	width:1200px;
}
#header::before { position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(../images/header.png);}

Open in new window

It is.  Then the gradient is applied at the "bottom" level, with a new "layer" with the actual PNG laid over top of it.
The abs positioning makes sure it acts the same as if it were applied to the parent, and doesn't interfere with the actual child elements.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Is this what you are saying:

#header{
        position:relative; background: linear-gradient(to bottom, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 1.0) 50%);
	color:#FFF;
	font-size:18px;
	height:100px;
	padding:20px 20px 20px 20px;
	width:1200px;
}
#header::before { position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(../images/header.png);}

Open in new window


If so, it is not working.  The div is split, but the image is not there.
Sorry, my mistake.  You always need to specify "content" in :before and :after tags.

#header{
        position:relative; background: linear-gradient(to bottom, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 1.0) 50%);
	color:#FFF;
	font-size:18px;
	height:100px;
	padding:20px 20px 20px 20px;
	width:1200px;
}
#header::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(../images/header.png);}

Open in new window

Author

Commented:
Perfect!  Thank You!

Author

Commented:
Another issue came up.  The image is now hiding data in "sub" divs:

<div id="header">
    <div id="hl" title="Information Technologies">
    	
    </div><div id="hc" title="Information Technologies">
    	
    </div><div id="hr">
    	<span  title="Contact us at contact@abc.com or 888.888.8888"><a href="mailto:contact@abc.com">contact@abc.com</a><br />888.888.8888</span>
    </div>
</div>

Open in new window

Try tacking on a z-index: -1; to the ::before:

#header::before { content:""; position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; background-image:url(../images/header.png);}

Open in new window

Author

Commented:
Did not work.  Now the divs are showing, but the bottom of #header does not display the image, just the white.  I tried z-index:10; on #hr, but it did not work.
Any chance you can post a link to the actual page?  Or if not, a screenshot or fiddle?

Author

Commented:
Actually, I fixed it.  What I did:

#header{
	color:#FFF;
	font-size:18px;
	height:100px;
	padding:20px 20px 20px 20px;
	position:relative; background: linear-gradient(to bottom, rgba(0, 0, 0, .0) 50%, rgba(255, 255, 255, 1.0) 50%);
	width:1200px;
	z-index:-2;
}
#header::before {
	background-image:url(../images/header.png);
	content:"";
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:-1;
}

Open in new window


Thank you very much for your help!
No problem, glad you've got it working.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
With CSS3 you can apply multiple background images to the same element.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
https://www.w3.org/TR/css-backgrounds-3/#layering

background: url(../images/header.png) no-repeat, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(255, 255, 255) 50%) no-repeat;

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial