Background

I want to create a background gradient for each verse in a poem separating each verse. That will be 12 verses. What is the best way to do this?

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<link href=“style.css” rel=“stylesheet” type=“text/css” />

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>Children Live What They Learn</title>

</head>

<body>

<div id=“container”>

<h1>Children Live What They Learn </h1>
<h2>By Dorothy Law Nolte</h2>
<blockquote class=“verse”>
<pre>
If children live with criticism,
they learn to condemn.
If children live with hostility,
they learn to fight.
If children live with fear,
they learn to be apprehensive.
If children live with shame,
they learn to feel guilty.
If children live with encouragement,
they learn confidence.
If children live with tolerance,
they learn to be patient.
If children live with praise,
they learn to appreciate.
If children live with acceptance,
they learn to love.
If children live with approval,
they learn to like themselves.
If children live with honesty,
they learn truthfulness.
If children live with security,
they learn to have faith in themselves and others.
If children live with friendliness,
they learn the world is a nice place in which to live.
</pre>
</blockquote>

</div>

</body>
</html>

body {background-color: #FCF;}

h1, h2 {
color: #009966;
padding: 5px 10px 2px 10px;
}

p {
margin:0;
padding-left: 1em;
text-indent: -1em;
}

body {
background-color: #99FFCC;
background-image: url(images/background_fixed_1.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
background-attachment: fixed;
font: 1em Verdana, Arial, Helvetica, sans-serif;
color: #003300;
margin: 0;
padding: 0;
}

#container {
background-color: #FFF;
padding: 15px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
border: 2px solid #9FC;
width: 600px;
}

.verse {
margin: 1em 0;
}

Well there really is no easy way to do this. In fact, unless you manually give each line an element, and setting the image there, then there isn’t any other pure CSS way (well there are other methods, each as good as the one I listed. In other words, there isn’t any great way :).

Hi Karen,

Do you mind the idea of using Javascript?

If not then I can suggest a quite simple way to do it with the JQuery javascript library. The biggest drawback that if a user was not using Javascript or have a device that could not read Javascript they would not see the alternating colours.

Alternatively I also know a way to do this using PHP, so if your host supports php then I could write you a little class that would be easy to use and give you the different gradients. This would work for a much wider audience.

By the way either of these approaches would make use of CSS classes to select the background gradient image; the Javascript or PHP would simply do the work of rapping each poem line with the <span class=‘gradient1’>verse</span>

Please post your desires in this regard and I would be happy to help.

[Edit: after re-reading your desires, another simpler idea base purely on CSS]

For each verse contained within the <blockquote> put a unique id for each verse i.e.

<blockquote id="verse1" class="Verse">

For the 12 uniqe ids you would use something like

#verse1 { 
 background-image: url('./images/verse1_bk.jpg');
 background-repeat: no repeat; 
} 

It is not too much mark-up or a lot of CSS.

Hopefully I am not missing the point as it is late and I am very tired :slight_smile:

Regards,
Steve

Do you mean like this?

If I’m not misunderstanding you and you don’t mind some extra markup, you could also do something like this:


.verse span {
    background: url(images/image3.jpg) repeat-y;
    display: block;
}



<pre>
    <span>If children live with criticism,
    they learn to condemn.</span>
    <span>If children live with hostility,
    they learn to fight.</span>
    <span>If children live with fear,
    they learn to be apprehensive.</span>
    <span>If children live with shame,
    they learn to feel guilty.</span>
    <span>If children live with encouragement,
    they learn confidence.</span>
    <span>If children live with tolerance,
    they learn to be patient.</span>
    <span>If children live with praise,
    they learn to appreciate.</span>
    <span>If children live with acceptance,
    they learn to love.</span>
    <span>If children live with approval,
    they learn to like themselves.</span>
    <span>If children live with honesty,
    they learn truthfulness.</span>
    <span>If children live with security,
    they learn to have faith in themselves and others.</span>
    <span>If children live with friendliness,
    they learn the world is a nice place in which to live.</span>
</pre>

If I’m not misunderstanding you and you don’t mind some extra markup, you could also do something like this:

Thank you for your help. I was going to set a different color for each verse. I aldready have the files created, They are named image12 thru image12.

ANY help would be greatly appreciated, Karen

Thank you, but I can’t use JavaScript.

You could, of course, use one big background image for the whole poem, but if text were resized it would not line up with the colors.

You could do what kohoutek did, but add a different class to each span and specify a different image, or combine the images together (making them a bit taller though—say 100px each) as a single “sprite” image. That is, position the background differently behind each verse.

e.g.


<pre>
    <span [COLOR="Red"]class="first"[/COLOR]>If children live with criticism,
    they learn to condemn.</span>
    <span [COLOR="Red"]class="second"[/COLOR]>If children live with hostility,
    they learn to fight.</span>


.verse span.first {
    background: url(sprite.jpg) repeat-y 0 0;
    display: block;
}

.verse span.second {
    background: url(sprite.jpg) repeat-y 0 -100px;
    display: block;
}

Hi

Maybe I read the request wrong but Karen said new gradient for each verse not each line. For brevities sake I believe she only provided one of the 12 verses.

If this is true then she essentially has to use a block level element that she can put a unique id on; one per verse and then she can either use her background gradient images with background-repeat: repeat-y;. if her gradients fade to the background color on the right hand side then even if the text is resized and the width of the container grows then visually it still will look ok.

Alternatively two layers could be used for each verse. The layers could be created by z-index: 1000; and z-index: 2000;. The background image is defined as a regular <img> and the verse is the block level element with the higher z-index number. The width and height of the gradient could be set to 100% and would resize if the font-size is increase by the end-user.

Regards,
Steve

A verse is a line. :wink:

But you are probably right about what she wants.

I am humbled that my lack of English knowledge is so profound. No excuse for this :blush:

Thanks ralphp.m

Regards,
Steve

If you don’t need IE6 support you can do it without adding extra classes like so:


.verse span {display: block;}
.verse span{background:url(images/image1.jpg) repeat-y}
.verse span + span{background:url(images/image2.jpg) repeat-y}
.verse span + span + span{background: url(images/image3.jpg) repeat-y}
.verse span + span + span + span{background: url(images/image4.jpg) repeat-y}
.verse span + span + span + span + span{background: url(images/image5.jpg) repeat-y}
.verse span + span + span + span + span + span{background: url(images/image6.jpg) repeat-y}
.verse span + span + span + span + span + span + span{background: url(images/image7.jpg) repeat-y}
.verse span + span + span + span + span + span + span + span {background: url(images/image8.jpg) repeat-y}
.verse span + span + span + span + span + span + span + span + span{background: url(images/image9.jpg) repeat-y}
.verse span + span + span + span + span + span + span + span + span + span{background: url(images/image10.jpg) repeat-y}
.verse span + span + span + span + span + span + span + span + span + span + span{background: url(images/image11.jpg) repeat-y}
.verse span + span + span + span + span + span + span + span + span + span + span + span {background: url(images/image12.jpg) repeat-y}


(rest of the code is the same as Kohoutec’s above example.)

If you want to support IE6 then you will need to add a class to each span and target it directly.

e.g.


.verse span {display: block;}
.verse span.v1{background:url(images/image1.jpg) repeat-y}
.verse span.v2 {background:url(images/image2.jpg) repeat-y}
.verse span.v3{background: url(images/image3.jpg) repeat-y}
.verse span.v4{background: url(images/image4.jpg) repeat-y}
.verse span.v5{background: url(images/image5.jpg) repeat-y}
.verse span.v6{background: url(images/image6.jpg) repeat-y}
.verse span.v7{background: url(images/image7.jpg) repeat-y}
.verse span.v8{background: url(images/image8.jpg) repeat-y}
.verse span.v9{background: url(images/image9.jpg) repeat-y}
.verse span.v10{background: url(images/image10.jpg) repeat-y}
.verse span.v11{background: url(images/image11.jpg) repeat-y}
.verse span.v21 {background: url(images/image12.jpg) repeat-y}



<blockquote class="verse">
<pre>
    <span class="v1">If children live with criticism,
    they learn to condemn.</span>
    <span class="v2">If children live with hostility,
    they learn to fight.</span>
    <span class="v3">If children live with fear,
    they learn to be apprehensive.</span>
    <span class="v4">If children live with shame,
    they learn to feel guilty.</span>
    <span class="v5">If children live with encouragement,
    they learn confidence.</span>

    <span class="v6">If children live with tolerance,
    they learn to be patient.</span>
    <span class="v7">If children live with praise,
    they learn to appreciate.</span>
    <span class="v8">If children live with acceptance,
    they learn to love.</span>
    <span class="v9">If children live with approval,
    they learn to like themselves.</span>
    <span class="v10">If children live with honesty,
    they learn truthfulness.</span>
    <span class="v11">If children live with security,
    they learn to have faith in themselves and others.</span>

    <span class="v12">If children live with friendliness,
    they learn the world is a nice place in which to live.</span>
</pre>
</blockquote>


(rest of the code is the same as Kohoutec’s above example.)

Thank you everyone for your help.
Karen

Paul cool sans ie6 version

Regards,
Steve

Thanks :slight_smile: We could more easily use CSS3 nth child but then we lose all IE versions and a lot of other browsers :wink: