Hallo,
Ik heb een klein deel van mijn inlog scherm gemaakt en er klopt nu al iets niet, Mijn css werkt maar voor de helft:

index.php:

<!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>
<title>Geen titel</title>
<meta http-equiv="Content-Type" content="text/html"/>
<meta name="author" content="Yearupie" />
<meta name="publisher" content="Yearupie" />
<meta name="robots" content="index all, follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" media="screen" href="css/login.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div id="main">
 <form action="login.php" method="post">         
 Gebruikersnaam:<br/>         
 <input type="text" name="username"/>         
 <br/>         
 Wachtwoord:<br/>         
 <input type="password" name="pass"/><br/>         
 <input type="submit" value="Inloggen" name="submit"/>         
 </form>   
</div> 
</body>
</html> 


css/login.css:

body{
	background: #00520E;
}
div#main{
	background-image:url('images/login/bg.png') no-repeat;
	width: 701px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background: #00520E;
	overflow: auto;
}

Wat er nu niet werkt:
- Er is geen achtergrond plaatje
- De div heeft geen hoogte van 100%

Normaal zou dit toch gewoon moeten werken?

Dit zegt firebug:

body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#00520E none repeat scroll 0 0;
}
div#main {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#00520E none repeat scroll 0 0;
height:100%;
margin-left:auto;
margin-right:auto;
overflow:auto;
text-align:left;
width:701px;
}


Weet iemand hoe ik dit goed krijg?
heb je een online voorbeeld?
Je kunt die no-repeat niet op background-image zetten, je zult dan bijvoorbeeld background-repeat er bij moeten gebruiken.
Je moet als pad voor het plaatje dit gebruiken:

../images/login/bg.png

verder moet je niet background-image maar background gebruiken, omdat je ook no-repeat erbij hebt gezet.

ik ga ff verder kijken waarom hij niet 100% hoog is
voor 100% hoogte moet je dit in je CSS toeveogen:


html, body {
width: 100%:
height: 100%;
}

verder moet je bij #main dit erbij doen: min-height: 100%:
oke, ik heb nu dit, maar het werkt nog niet:


body{
	background: #00520E;
}
div#main{
	background:url('../images/login/bg.png') no-repeat;
	width: 701px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background: #00520E;
	overflow: auto;
}


Het is zelfs zo dat die niet werkt met :
background:url('http://*.com/images/login/bg.png') no-repeat;
bij mij werkt dat wel...
Tamara schreef op 07.11.2009 17:44
bij mij werkt dat wel...

Maar op mijn site nog niet, weet echt niemand wat er nu fout gaat?
Drie mogelijkheden: je surft met IE6, het komt omdat je geen waarde voor left en top hebt opgegeven, of het komt omdat je enkele quotes gebruikt bij url. Die mogen er namelijk niet staan.

background:url(../images/login/bg.png) left top no-repeat;
Ik heb het veranderd in:
background:url(../images/login/bg.png) left top no-repeat;

Nog steeds geen zichbaar resultaat.:S

browser:
Opera (laatste versie)
firefox (laatste versie)
IE 8

Reageren