asked on

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

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

Snarf0001

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

GEMCC

ASKER

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

Snarf0001

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.

GEMCC

ASKER

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.

ASKER CERTIFIED SOLUTION

Snarf0001

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GEMCC

ASKER

Perfect! Thank You!

GEMCC

ASKER

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

Snarf0001

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

GEMCC

ASKER

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.

Snarf0001

Any chance you can post a link to the actual page? Or if not, a screenshot or fiddle?

GEMCC

ASKER

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!

Snarf0001

No problem, glad you've got it working.

David S.

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

Attempting to split color in a &lt;div&gt; then place a transparent PNG image over the colors

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