CSS Background - Text On Top?

ironclaw · 06-12-2009 2:00pm #1

I've created a page where a background image dynamically changes size to reflect the size of the browser window. All is going well but I can't get text to appear on top of the background image? I've included the code below. Any help appreciated!

ironclaw

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welcome!</title>

	<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 62.5%;
	font-family: Georgia, serif;
	overflow: hidden;
}



.bg {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5000;
}

#para1
{
text-align:center;
color:red
font-family: Georgia, serif;
} 


</style>

</head>

<body>
<center>
<img id="background-img" class="bg" src="/imgs/DSCF04231.JPG" alt="" />
<p></p>
[B][I][COLOR="Red"]<div id="para1"/>
<p>Text to Put Over Image Here</p>
</div>[/COLOR][/I][/B]
</center>
</body>
</html>

Liam Byrne · 06-12-2009 2:56pm

The <img> tag puts an imaget inline, in a page.

Also, position:absolute is a bad idea in relation to different-sized screens, and it's completely incompatible with the <center> tag.

The proper code to achieve what you want is to use the background-image CSS property on either the body tag or the div, adding no-repeat if required.

ironclaw · 06-12-2009 4:47pm

Liam Byrne wrote: »

The <img> tag puts an imaget inline, in a page.

Also, position:absolute is a bad idea in relation to different-sized screens, and it's completely incompatible with the <center> tag.

The proper code to achieve what you want is to use the background-image CSS property on either the body tag or the div, adding no-repeat if required.

I'm very new to CSS so would you be able to demo that or point me in the right direction? I basically need a background image (That will resize nicely to a browser) and on that image will be text links.

Many Thanks

Liam Byrne · 06-12-2009 5:06pm

ironclaw wrote: »

I'm very new to CSS so would you be able to demo that or point me in the right direction? I basically need a background image (That will resize nicely to a browser) and on that image will be text links.

Many Thanks

Firstly, images can't strictly resize to any "browser" (window size); the usual trick is to get them to repeat either horizontally or vertically, or tile, often allowing it to "fade" into the background colour.

Tutorial here : http://www.w3schools.com/css/css_background.asp

That tutorial puts the background on the body, but you can put it on any element - body, div, p, whatever.

N.B. If you're putting a background on an element, and you want the content to be "pushed in" from the edge, don't use padding, as it can (unfortunately) change the size of the element in different browsers; instead put something inside that container element, with a margin on it.

<div style="background-image:url(background.jpg);width:100px;height:300px">
<p style="margin:10px">TEXT GOES HERE</p>
</div>

ironclaw · 07-12-2009 2:01pm

Thanks for the reply but it isn't what I'm after. I need a background image to fill the browser but produce no scrolling. And in front of this image I would like to put some text. I'm completely new to CSS so apologises if I'm asking the impossible!

EDIT: Can I do this in HTML? Its for an entrance page so HTML is an option.

Eoin · 07-12-2009 2:47pm

CSS is just the method used to apply style to (X)HTML, so you will be using HTML either way.

If a page background image is taller than the page height, then it won't produce a scrollbar.

By the way - you need to remove the forward slash from the first tag. You are closing the div tag by doing this </div>.

You only put the forward slash at the end of a tag when it's a tag that doesn't contain child elements, like an image or linebreak or horizontal rule.

[html]
<div id="para1"/>
<p>Text to Put Over Image Here</p>
</div>
[/html]

Liam Byrne · 07-12-2009 2:51pm

ironclaw wrote: »

Thanks for the reply but it isn't what I'm after. I need a background image to fill the browser but produce no scrolling. And in front of this image I would like to put some text. I'm completely new to CSS so apologises if I'm asking the impossible!

EDIT: Can I do this in HTML? Its for an entrance page so HTML is an option.

If you put the background-image: on the BODY tag then it will "fill the browser"; you just need to make sure that it's a pattern that's suitable to "repeat" in one direction and can fade out gracefully to the background colour on the other axis.

The fact is that you're dealing with different-sized browsers, so you can't create a graphic that is a certain number of pixels and use that - the graphic could potentially be 2048x1536 (too slow to download) and if you "stretch" a smaller graphic (say 512x384) to avoid the size issues it will look blurry and crap.

In addition, in both cases it would cause problems for you on a non-widescreen monitor.

This is a common issue when "designers" who are used to fixed sizes (e.g. A4 pages, photo sizes, etc, turn to implementing this on the web; it cannot be done.

And what do you mean "HTML is an option" ? All websites should be done in HTML. As eoin said, CSS is "only" a better way of styling and controlling how the HTML is displayed.

CSS Background - Text On Top?

Comments