Problemen met achtergronden

Status
Niet open voor verdere reacties.
M

MadeByLaura

Gebruiker
Lid geworden
2 jun 2011
Berichten
104
Hallo, ik heb een probleem met het maken van mijn website, ik heb een achtergrond afbeelding gemaakt voor mijn hele site,
maar ik wil de achtergronden van mijn divs in een andere kleur, maar ik weet niet goed hoe ik het moet doen, ik heb de kleur die ik wil ook al in mijn code gezet, maar het werkt nog steeds niet. Ik heb ook al geprobeerd met "clear:both"
Iemand die ik kan helpen, ik heb een kleine cursus html en css gevolgd op codecademy, maar ik ben nog geen pro...

De code:
HTML: 
<!DOCTYPE html>
<head>
	<title>MadeByLaura</title>
    <style>
		* {
			background-image:url(SiteLaura/Images/BG.jpg);
			background-attachment:fixed;
			background-repeat:no-repeat;
			background-position:center;
			margin:0% 2% 4% 2%;
			}
		h1 {
			font:"mission Script", "bodoni MT Poster Compressed", calibri;
			font-size: 50px;
			color:brown;
			}
		h2 {
			font:BodoniXT, calibri;
			font-size: 30px;
			color:#CCC;
			}
		p {	
			font:Calibri;
			font-size:15px;
			color:#FFF;
			}
		div {
			background-color:#CCC;
			width:114px;
			height:27px;
			display:inline-block;
			text-align:center;
			font:Calibri;
			}

    </style>
</head>
<body>
	<div>Home</div>
	<div>About us</div>
	<div>Contact</div>
    
	<h1>MadeByLaura<h1>
    <h2>Photoshop and webdesign</h2>
</body>
 
Zoals de code nu staat zouden je divs een grijze achtergrond moeten krijgen. Het is trouwens handiger om met classes te werken. Nu krijgen namelijk alle divs een grijze achtergrond, gecentreerde tekst en precies dezelfde afmetingen, uiteindelijk is dat waarschijnlijk niet wat je wilt.
 
Zoals naarling hierboven al zegt je moet gaan werken met classes als je per div een andere kleur wilt.

bv : css
HTML: 
.eerstediv {
background-color: #333;
}

.tweedediv {
background-color : #000;
}

HTML --

<div class="eerstediv">eerste div</div>
<div class="tweedediv">tweede div</div>


hoop dat je nu genoeg weet!
 
Ik weet dat dat een grijze kleur is, maar als ik kijk in mijn browser of naar de live in dreamweaver krijg ik geen achtergrond van de div's...
Hoe komt dat? (het is de bedoeling dat alle divs grijs zijn dus werk ik niet met classes, het is nog maar een probeersel...)
 
Je hebt er een * in zitten:
Code: 
* { 
   background-image: url(SiteLaura/Images/BG.jpg);
   ... enz.
}
Een sterretje betekent: alle elementen!
Dus ook alle <div>'s krijgen dat background-plaatje (d.w.z. het middendeel ervan), en niet de background-color, want die begint pas buiten het image.

Als je alles behalve de <div>'s het plaatje wilt geven, dan kan je in plaats van dit:
Code: 
div {
    background-color:#CCC;
    ... enz.
    }
...dit doen:
Code: 
div {
    background:#CCC;
    ... enz.
    }
Door het woord "background" als enige te nemen, gebruik je de verkorte notatie die voor alle background-eigenschappen van de div's geldt. Wat daarin niet genoemd wordt, wordt dan niet gebruikt.
En omdat een style voor een <div> specifieker is dan een style voor * (alles), wordt nu de opdracht "background-image" overruled: er komt géén bg-img, maar alleen de kleur.

Het is dus vrij gevaarlijk om een * { ... } stijl op te geven! :rolleyes:

Met vriendelijke groet,
CSShunter
 
hoe kan je dan een background-image van je pagina instellen zonder het sterretje te gebruiken?
 
Gewoon met:
Code: 
body {
    background: url(images/pagina_background.jpg) no-repeat fixed 50% 0;
    }
Vaak is het handig om de verticale positie van een pagina-background niet op 50% (= "center") te zetten, anders loop je het risico dat bij minder hoge schermen niets van het bovenstuk van de achtergrond gezien kan worden - dat staat dan buiten beeld.
Maar het hangt helemaal van het ontwerp af of dat wel of niet wenselijk is! :)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan