Colour only one part of an HTML element

css, javascript

Solution

I'd create a background div. Consider this HTML:

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

With 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

Problem

How would I go about coloring only one part of an HTML element with something like `background-clip` - using CSS only. I'm looking something like: ``` div { background-image: url('mi_image'); ***: 50% 30em; /* Background only covering 50% height and 30em width */ } ``` I'm also open to a JavaScript solution, if necessary - but pure CSS would be better.

Original source