The color of only one part of the HTML element

Question

How can I color only one part of an HTML element with something like background-clip - only using CSS.

I look something like:

 div { background-image: url('mi_image'); ***: 50% 30em; /* Background only covering 50% height and 30em width */ } 

I can also use a JavaScript solution if necessary, but pure CSS would be better.

Answer 1

I would create a background div. Consider this HTML:

 <div id="outer-container"> <div id="container-background"></div> <div id="container"> <p> Here some of my interesting text </p> </div> </div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Using this CSS:

 <style type="text/css"> #outer-container { height: 300px; width: 300px; border: 1px solid black; position: relative; overflow: hidden; } #container-background { position: absolute; top: 0px; left: 0px; background-color: #FF0000; /* Use background-image or whatever suits you here */ width: 50%; /* Your width */ height: 200px; /* Your height */ z-index: -1; }​ </style> 

To create a result like this:

JSFiddle demo

Answer 2

You can color part of the background of an element using the pseudo :before element.

Demo : http://jsfiddle.net/yw3wF/

The code:

 <div class="foo">This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. </div> .foo { width: 200px; height: 200px; position: relative; border: 1px solid green; margin: 10px; float: left; } .foo:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 50%; background-color: yellow; z-index: -1; } 

Answer 3

I'm not sure I’m completely sure that I understand your question, but check out this script: http://jsfiddle.net/TJSdq/ and see what you want.

HTML

 <div> This is my div and I love my divs. I take good care of my divs; they are my babies. </div>​ 

CSS

 div{ width:200px; height:200px; padding:20px; background-color:yellow; background-clip:content-box; -webkit-background-clip:content-box; border:2px solid black; } ​ 

However, if you want to color only part of a div asymmetrically, it is best to use sub divs and color the div instead. This method is preferable because it will have better browser support than the new CSS3 methods that I don't know about. In the final example, check out this script: http://jsfiddle.net/aD9mF/ .

HTML

 <div> This is my first div. <div> This is my sub-div. </div> <div>​ 

CSS

 div{ width: 300px; height: 300px; border: 3px solid black; } div div{ background-color:yellow; width: 30px; height: 100%; float:left; border:none }