Archief - css toon niet gehele background

badboyss · 7 okt 2013

hallo

Vroeger werkte ik met frames,maar ik ben nu bezig met te leren werken met div's en met css.
Enig probleem mijn background image wordt niet op de volledige groote getoond?

website
originele background

Ook wil ik hebben als men de browser verkleint ofvergroot de content mee gaat in grote maar dit gebeurd ook niet.
Hmm ik heb nog veel te leren over divs en css

css

Code:

body{
margin: 0;
padding: 0;
border: 0;
background-color: white;
}

#top{
width:65%; 
height:10%; 
position:fixed;
top:0px; 
left:18%; 
background-color:black;
}

#links{
width:20%; 
height:100%; 
position:fixed;
top:0px; 
left:0px; 
background-color:black;
}

#midden{
background-image:url(../img/background.jpg);
background-repeat:no-repeat;
width:100%;
height:100%; 
position:fixed;
top:50px; 
left:20%; 
background-color:black;
}

#rechts{
width:100%; 
height:100%;
position:fixed; 
top:0px; 
left:82.5%; 
background-color:black;
}

#footer{
width:62.5%; 
height:5%; 
position:fixed;
bottom:0px; 
left:18%; 
background-color:black;
}

html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<head>
<title>Garage Vervaecke David</title>
<meta charset="utf-8">
<link rel="stylesheet" href="html/style.css" type="text/css" media="all">
    </head>
    <body>
		 <div id="top"> 
        <a href="http://test.be"> top </a> 
				</div> 
				
        <div id="links"> 
        <a href="http://test.be"> links </a> 
				</div>
				
        <div id="midden"> 
        <font color="#FFFFFF">midden </font> 

				
				</div>
				
        <div id="rechts"> 
        <a href="http://test.be"> rechts </a> 
				</div>
				
				 <div id="footer"> 
        <a href="http://test.be"> footer </a> 
				</div>
				
    </body>
</html>

wie kan me verder helpen hiermee?

grts

woony · 7 okt 2013

Ik ga u de oplossing niet geven aan gezien je aan het leren bent.

Het probleem zit hem simpel weg in de grootte van de div die je creëert. #midden tov het feit dat uw background een vaste grootte heeft.

dus ofwel zorg je dat uw div diezelfde grootte heeft, maar dan zal deze ook niet wijzigen naar gelang uw browser size zal veranderen.

andere oplossing is om background-size: 100% te zetten wat een css3 setting is.

Op zich is uw manier wat je probeert gewoon geen goeie manier , maar je bent nog aan het leren.

eigenlijk zou je een klein repeatend stukje background moeten gebruiken, en de elementen er op als de titel en de auto losstaand positioneren hierop afhankelijk dan van de groottes.

veel succes nog.

badboyss · 7 okt 2013

hey

ik heb de oplossing gevonden denk ik bijna

eerst een div container maken en daarin enkel div classes.(verschill moet ik nog uitzoeken)
Nu lukt het zoals ik wil enkel nog zien of de rest het doet.
Maar nu kan ik blijven naar beneden scrollen en dit is ook de bedoeling niet
Wat ik ook wel raar vind is de uitlijning van het logo en de auto.
het logo geef ik een top: 30px; left: 30px; en de car moet ik top: -1000px; left: 420px; meegeven dus dat zal ook wel ergens fout zitten.
Nu we zijn al een stap verder ;-)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="html/style.css" type="text/css" media="all">
</head>
<body>
<div id = "wrapper">
<div class="top">test</div>
<div class="bgimg">
<div class="logo">logo</div>
<div class="car">logo</div>
</div>
</div>

</body>
</html>

Code:

body, html{
margin: 4px;
height:100%;
background-color:black;
}
#wrapper{
margin-left:300px;
}

.top {
    height:100px;
		width:79%;
		align: center;
		background-color:red; 
}

.bgimg {
    background-image: url(../img/wall.png);
		background-repeat:no-repeat;
		position: relative;
		height:1000px;
		width:100%;
		align: center; 
}

.logo {
    background-image: url(../img/logo.png);
		background-repeat:no-repeat;
		position: relative;
    top: 30px;
    left: 30px;
		height:100%;
		width:100%;
		align: center;
		
}

.car {
    background-image: url(../img/car.png);
		background-repeat:no-repeat;
		position: relative;
    top: -1000px;
    left: 420px;
		height:100%;
		width:100%;
		align: center;
		
}

CrushTheButton · 7 okt 2013

Als je alles mooi in het middel wilt hebben staan dan kan je de wrapper aanpassen. Zie code.

Code:

#wrapper {
      width: 960px; /* Dit heb je nodig zodat de margin weet hoeveel margin er aan elke kant moet om alles te centreren */
      margin: auto; /* Dit plaatst het element in het midden */
}

#top {
      width: 100%; /* Zo hoef je niet beide "widths" aan te passen als het groter moet. Je kan ook 960px schrijven */
}

Als je het natuurlijk niet wilt centreren dan heb ik niets gezegd!

badboyss · 7 okt 2013

alles moet gecentreerd zijn ;-)
bedankt daarvoor aangepast.
Maar hoe vermijd ik het eindeloos scrollen nu?

grts

woony · 8 okt 2013

pff, er is hier geen simpele oplossing voor want je zit eigenlijk al van het begin mis

waarom zijn dat logo en die auto 100% height? dan zit je met een div met text in met clear:both dus die komt er onder te staan. waardoor je het enigsinds gaat oplossen met allerhande negatieve margins etc.

moest ik jou zijn zou ik eens herbeginnen. en neem eens een kijkje naar floats.

start met uw wrapper met daar in 4 divkes.
logo car
menu
content en maak gewoon gebruik van floats, dus geen top left etc.

Archief - css toon niet gehele background

badboyss

Legacy Member

woony

Legacy Member

badboyss

Legacy Member

CrushTheButton

Legacy Member

badboyss

Legacy Member

woony

Legacy Member