CODEWITHSUNDEEP
css
user1304835
user1304835

Reputation: 11

How can I put two different colors behind a heading using css?

h2 {background-color:#C61236; 
color:#FFFFFF; 
font-size:medium; 
line-height:1.5; 
text-indent:20px;}

This is what I have right now, but I want to add a different color block at the beginning before the text.

Unsure how to proceed..

Upvotes: 1

Views: 5093

Answers (5)

Shailender Arora
Shailender Arora

Reputation: 7778

see the simple code :-

h2 {background-color:#C61236;
color:#FFFFFF;
font-size:medium;
position:relative;
margin:10px 0 0  50px;
}
h2:before {
position:absolute;
content:" ";    
background:blue;
width:100px;
left:-100px;
top:0;
bottom:0;
}

see the demo:- http://jsfiddle.net/3EY7t/3/

Upvotes: 0

magicalex
magicalex

Reputation: 937

The simplest most semantic method I can think of would be to remove your text-indent and add a left border of the desired colour i.e.

h2 {background-color:#C61236; 
color:#FFFFFF; 
font-size:medium; 
line-height:1.5;
border-left: 20px solid yellow;}​

You can see it in action in this jsFiddle.

You should probably add a unit to your line-height as well.

Upvotes: 1

Thomas Denney
Thomas Denney

Reputation: 1608

An alternative option, if available to you, would be to use a CSS3 gradient as the background instead:

background-image: linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -o-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -moz-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -webkit-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);
background-image: -ms-linear-gradient(left , rgb(0,0,0) 0%, rgb(0,0,0) 50%, rgb(12,97,35) 50%);

Upvotes: 0

shanethehat
shanethehat

Reputation: 15570

If you wrap your test in a span this is very easy.

<h2><span>Text</span></h2>

Apply one color to the h2 background, and one to the span. Use padding to reveal the h2 background:

h2 {
    background-color:#C61236; 
    color:#FFFFFF; 
    font-size:medium; 
    line-height:1.5; 
    /*text-indent:20px;*/
    padding-left:20px;
}

h2 span {
    background-color:#f00;
}

Upvotes: 1

user420442
user420442

Reputation:

There are several ways you could do this. The easiest, I think, would be to create a small single colour image for the left background colour, and use the block colour as the main colour behind the text, with the image set as the background for the block titled vertically down the left side:

background: #C61236 url( 'singlecolour.png' ) top left repeat-y;

Upvotes: 0

Related Questions