Forum Moderators: not2easy
I'm trying to use background images in some of my divs, but it just won't work.
However, if remove the "http://www.w3.org/TR/html4/loose.dtd" from the doctype declaration, it works just fine, but then i can't center things on the screen anymore.
So, i can either get the background images to work, and not be able to center things. Or i can center things, but not see any of the background images.
The code is valid html and css, and here is all of it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Created with the CoffeeCup HTML Editor 2008 -->
<!-- Brewed on 1/13/2009 6:34:52 PM -->
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
body { margin: 0px 0px 0px 0px; }
.upper-header {
width : 100%;
margin : auto;
clear : both;
background-image : url(C:\wamp\www\personlig\myndir\header-bakgrund.jpg);
height : 51px;
}
.middle-header {
width : 100%;
margin : auto;
clear : both;
background-image : url(C:\wamp\www\personlig\myndir\header-2-bakgrund.jpg);
height : 141px;
}
.body-header {
width : 100%;
margin : auto;
clear : both;
background-image : url(C:\wamp\www\personlig\myndir\body-bakgrund.jpg);
height : 207px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto
}#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
border: 2px solid #000;
width: 80%;
}
</style>
</head>
<body >
<div class="upper-header">
</div>
<div class="middle-header">
</div>
<div class="body-header">
</div>
<IMG class="center" src="C:\wamp\www\personlig\myndir\header-img.jpg" alt="bla bla">
<div id="container">
<p>This is a demo to show how to center a DIV in the center of the screen from Internet Explorer 4 and up. Including all modern browsers too.</p>
<p>The trick is to add <code>text-align: center;</code> to the body selector, then add the usual <code>margin: 0 auto;</code> to the container selector which you want centered. Apply <code>text-align: left;</code> on the container to counter the center align for body.</p>
<p>View this pages source code to see how it's done</p>
</div>
</body>
</html>
Any help is much appreciated
[edited by: eelixduppy at 9:31 pm (utc) on Jan. 13, 2009]
If your page is in the "www" directory, instead of
url(C:\wamp\www\personlig\myndir\body-bakgrund.jpg);
try this:
url(personlig/myndir/body-bakgrund.jpg);
Browsers interpret paths in unix-style syntax, not Windows-style.
You won't need to remove the doctype, this is what causes it to render in Standards Compliance Mode and is the best path to cross-browser compatibility.
I tried your suggestion, but it did not work. the page resides in the "personlig" directory.
I just got it to work by changing the paths to unix style. But it only seems to wok if i use the full path, like this:
background-image : url(C:/wamp/www/personlig/myndir/body-bakgrund.jpg);
It will not work by only using "myndir/bodybakgrund.jpg"
Thanks again rockbil
