Centering a background behind text

jbrintnell

09-18-2011, 10:06 PM

Hello all. I'm attempting to center a background behind text. I got it so it works on my monitor, but when I resize my screen, the image goes off to the right. I need the image to stay centered on the screen, behind H1 and H2.

Here is my code.

<h1>Electronic Solutions</h1>
<div style= "position:fixed;
left:425px;
top:10px;
z-index:-1;">
<IMG SRC="images/banner.jpg" ALT="Banner" height="200" width="850">
</div>
<h2>Serving all your telecommunication needs</h2>

all I want is the banner to stay behind the headings. I haven't tried floating it but was concerned because I am placing it behind text whether that would work correctly.

My website is www.myelectronicsolutions.com (http://www.myelectronicsolutions.com) which I know isn't compliant with W3 standards, nor are the colors and such correct at the moment.

coothead

09-18-2011, 11:15 PM

Hi there jbrintnell,

and a warm welcome to these forums. ;)

Try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.myelectronicsolutions.com">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Electronic Solutions</title>

<style type="text/css">
body {
margin:10px;
background-color:#b7d0e4;
font-family:'times new roman',garamond,serif;
font-size:18px;
color:#000066;
}
#container {
width:850px;
margin:auto;
}
#header {
height:186px;
padding-top:14px;
background-image:url('images/banner.jpg');
}
h1 {
margin:0 0 24px;
font-family:arial,'century gothic',tahoma,sans-serif;
color:#df013a;
text-align:center;
}
h2 {
margin:0;
font-family:arial,'century gothic',tahoma,sans-serif;
color:#c0c;
text-align: center;
}
</style>

</head>
<body>

<div id="container">

<div id="header">
<h1>Electronic Solutions</h1>
<h2>Serving all your telecommunication needs</h2>
</div>

</div>

</body>
</html>

coothead

jbrintnell

09-18-2011, 11:28 PM

So if I understand what you did there, you simply placed it all in a container that you defined as the same width as my banner?

I used your code, although I moved your CSS comments to the style sheet as once I get this it will affect the other pages as well.

It now works exactly as intended. Thank you.

coothead

09-18-2011, 11:42 PM

No problem, you're very welcome. ;)