Text background

HTML & CSS
1

I see on many sites a text background on top of the page background to help the text stand out. I’d like to add this to my page and am curious to what is the best way to implement this.

2

Am not certain of exactly what you are asking here w/o an example.

However , I will point out you can ADD a BG to almost any HTML element ( behavior will vary) using CSS. For example:

Adding a color bg:


h1{padding:10px; background: pink;}
<h1> headline</h1>

Using an image:


p{padding:10px; background:url(your_pic.jpg);}
<p>more sample text</p>

You can even control the repeat and position:


div{padding:10px; background:url(your_pic.jpg) 0 2em repeat-x;} /* the first # is horizontal offset, the second is the vertical.
<div>more sample text</div>
div{padding:10px; background:url(your_pic.jpg) 3em 0 repeat-y;} /* the first # is horizontal offset, the second is the vertical.
<div>more sample text</div>

as you can see you have quite a range of options to mix and match


div{padding:10px;  width: 500px; height:500px; background:url(your_pic.jpg) 100px 50px no-repeat pink;}
<div>more sample text</div>
3

Hi,

If you are talking about a transparent background behind the text to make it stand out a bit more you can do this for modern brower4s (ie9+) using rgba as follows:


<!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">
body { background:red }
.textbg {
	padding:10px;
	margin:50px auto;
	width:500px;
	[B]background: rgba(255, 255, 255, 0.4);[/B]
}
</style>
</head>

<body>
<div class="textbg">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate risus ut magna blandit vehicula. Proin condimentum sodales purus. Donec tincidunt magna quis odio gravida consectetur. Quisque ante nibh, accumsan ac porta non, viverra congue turpis. Quisque non leo at massa tempus blandit. Nullam viverra varius posuere. Fusce at tortor non quam aliquet feugiat. Pellentesque mattis orci id felis fermentum sodales. Sed scelerisque rhoncus justo sed malesuada. Morbi bibendum, tellus quis volutpat fringilla, mi libero pretium leo, in interdum purus metus ac felis. </p>
</div>
</body>
</html>

For older browsers you may want to default to a solid colour or use a background transparent png rather than opacity because opacity will fade the text also.

4

Can all this code go into the html?

5

Yes. See Paul’s example above. BUT … it’s better to put the CSS part into your external style sheet, so that it can be used on multiple pages.

6

by background transparent png, does that mean create the background as an image and put that behind the text?

7

Yes. You can create a .png image that is semi transparent. If you apply that as a background image to the text container, it will create a nice background effect, while still allowing what’s behind it to show through. :slight_smile:

There days, I prefer to use the rgb method, but if you must support older browsers, an image is a viable alternative. There are also some JavaScript scripts that force older browsers to play ball, but that’s probably going overboard. I prefer to let users of older browsers get a lesser experience.

8

So how exactly do i apply an images as a background for the text?

9

Remember, you are applying the image as a background to the text’s container, not to the text.


[COLOR="#FF0000"]<div class="textbg">[/COLOR]
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate risus ut magna blandit vehicula. Proin condimentum sodales purus. Donec tincidunt magna quis odio gravida consectetur. Quisque ante nibh, accumsan ac porta non, viverra congue turpis. Quisque non leo at massa tempus blandit. Nullam viverra varius posuere. Fusce at tortor non quam aliquet feugiat. Pellentesque mattis orci id felis fermentum sodales. Sed scelerisque rhoncus justo sed malesuada. Morbi bibendum, tellus quis volutpat fringilla, mi libero pretium leo, in interdum purus metus ac felis. </p>
</div>



.textbg {background: url(bgimage.png);}
10

Is as I said in my original response, you apply it to the element.
for example:

if you anted every P to have an single image of a bunny at the bottom left:

p{ background: url(bunny.jpg) no-repeat left bottom;}

if you wanted the same but in the of an unordered list

ul{ background: url(bunny.jpg) no-repeat left bottom;}

and so forth.

so your answer is/ are : background: and/or background-image image property, as described above.

11

I think I put the code it wrong somewhere because it isn’t showing up.

I put this code in the css

.textbg {
	padding:10px;
	margin: 50px auto;
	background: url(textbg1.png);
	}

and in the html i put <div class=“textbg”> before the text

12

It’s probably this bit that is wrong:

background: url([COLOR="#FF0000"]textbg1.png[/COLOR]);

You have to tell the CSS file exactly where the image is. For example, if it’s in an /images/ folder inside your root folder, the path should be

background: url([COLOR="#FF0000"]/images/textbg1.png[/COLOR]);

Where is the image stored in your site? (Don’t just tell us the folder name. We also need to know where the folder is in relation to your root folder.)

13

yup that did it! Thank you

14

Great! Glad it’s worked out well. :slight_smile: