WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Different Colors Where Elements Overlap

Reply
  Thread Tools Display Modes
Old 2nd March 12, 05:18 AM   #1
Emily
WLC Member
 
Join Date: Mar 2012
Posts: 1
Default Different Colors Where Elements Overlap

Hello!
So, I have some black text, and I have a red div. I want the text to turn green where it overlaps the red div. Like this! This is the desired effect:



I can't mess around with canvasses or anything like that, but I think I have a solution--almost! I made the green text into the background image of the red div element.

Check it out: http://www.liberocanto.org/ilcuorecanta/index2.html
And the CSS: http://www.liberocanto.org/ilcuorecanta/icctest2.css

The relevant bit, that creates the red div:

#leftcolumn{
width: 125px;
background: #B50041;
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-image: url(HoverTest.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: absolute;
z-index:2;

}


However, I can't, for the life of me, get the black text to sit UNDER the red div (the red div has the green text as its background image.) Do background images automatically sit behind non-backgrounds or something?
Emily is offline   Reply With Quote
Old 2nd March 12, 11:05 AM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Different Colors Where Elements Overlap

Quote:
Do background images automatically sit behind non-backgrounds or something?
ERRRMMMM??? Yes, that's why they are called BACKgrounds
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:07 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.