Split background in CSS

Anyone knows how to split the background colour of a header? For example http://www.outlish.com/ As you see the header “This Week’s Issue - Updated Every Monday” this has a different colour from the rest of the header background. I will like to know how to do this.

Thank you

To me it looks like they are using a sprite with a set background for the headers. Then when there is a <span> within the <h3> element they are setting the same background image for the span but are adjusting the positioning of background to reveal the brown version of the bar. Here is the image they are using: http://www.outlish.com/templates/rt_iridium_j15/images/style1/modules/h3-main.png

Simple. You use a span. This is true for any change of style within an element. <h2><span>This</span> week’s Issue</h2>. However it’s important to note that they used a fixed size bg, not very clever. if you enlarge the TEXT ONLY you will see the first word expands past it’s container. If you are confident that your headline will only be one line, a good compromise might be to float the span, give it a the brown bg/ white text and the H1 the brown text orange bg.

Ok I understand that but what if the header is more than one line what to do then and how can i implement this if the header is being pulled from a db with css only. Note i don’t need to use and image i can use just colors maybe some gradients with webkit to give the same effect

How do you want it to look when the header runs to two lines? Do you have a drawing of what you want as I can think of many interpretations?

I never really thought of that hmmm the only thing I can think of is to
continue with the second colour. If you have a better idea I would be glad to hear it

Hi,

You will need extra elements to do it as you can’t style a first-word in css (although you can style first-letter and first-line).

This works for two lines of text and will work with any text but won’t wrap nicely to three lines.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1 {
	margin:0 0 20px;
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(26%, #207cca), color-stop(50%, #2989d8), color-stop(74%, #2989d8), color-stop(100%, #7db9e8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #1e5799 0%, #207cca 26%, #2989d8 50%, #2989d8 74%, #7db9e8 100%); /* W3C */
	overflow:hidden;
	width:100%;
	position:relative;
	min-width:626px;
}
h1 span {
	float:left;
	padding:0 10px 105px;
	background:brown;
	margin:0 5px -100px 0;
	position:relative;
}
b {
	position:relative;
	z-index:2;
}
</style>
</head>

<body>
<h1><span>First</span> <b>word is styled differently from the rest of the text and can wrap to two lines</b></h1>
<h1><span>First-word-styling</span> <b> - The first word is styled differently</b></h1>

</body>
</html>


this is excellent however am guessing it is impossible to do if I pull the actual title from a db? I ask this because the original example shown is being done in Joomla which pulls the title from a db.

The original example uses a span as mentioned above:


<h3 class="module-title" style="visibility: visible;">[B]<span>This</span> [/B]Week's Issue - Updated Every Monday</h3>

There is no other way to do it apart from scripting or unless every fist word was the same length.:slight_smile:

Yeah I know that part and I know it can be implement if I entered the title but unfortunately am not am pulling the title from a db. The reason why it was asked is because the live example I showed also pulls the title from a db as it is a Joomla website. But some how they are able to create that header style every time regardless of how long the first word is. According to you Paul O’B though this has a script somewhere checking this to implement the style after its pulled from the db. I guess I would have to look for such a script if I want to implement this

Yes there is some Js adding the span. Disable JS and then view the page and you will see the first word is not highlighted in the header anymore. It’s probably one of the joomla js plugins but there are loads in the page so you would have to look through them all.

I’m sure someone in the javascript forum could knock up a small script with a few lines of code to insert a span where needed.

Thanks Paul O’B as usual you are a great help