Achtergrond stopt repeating

[mkanon]

In de onderstaande CSS heb ik #box welke alle content bevat, hierin heb ik een achtergrond geplaatst die zoizo al (om te testen) 2000px groot is... maar als ik de site open vult hij netjes 100% uit, maar als ik daarna in lange content pagina's naar beneden scroll blijft hij niet uitvullen en eindigd de achtergrond... Hoe kan ik zorgen dat de achtergrond blijft repeaten?

Cascading Stylesheet:

* {margin:0;margin:0;} /* remove default P M */

html,body{height:100%;} /* gets the 100% height, 100% min height */

body{
background: #ffffff;
text-align:center; /* center IE 5 */
font-family: "verdana";
font-size: 11pt;

}

#box{
margin:0 auto; /* center IE 6 en de rest */
text-align:left; /* text weer naar links */
width:970px;
background-image: url("images/bg.jpg");
background-repeat: repeat;
background-repeat: repeat-y;
}
* html #box{height:100%;} /* height IE < 7 */
head+body #box{min-height:100%;} /* height IE 7 en de rest */
#box p{padding:10px 5px;} /* padding op tag in container */

[ Voor 26% gewijzigd door mkanon op 23-07-2009 17:17 ]

[BtM909]

1. [code=css][/]

2. Heb je een klein relevant (maar compleet) voorbeeld van minder dan 75 regels code. Je hebt een probleem met een achtergrond die niet blijft repeaten en ik zie een hoop dingen die niet relevant zijn voor je probleem.

3. Daarnaast mis ik wat je zelf al hebt geprobeerd: met welke debuggers heb je gekeken naar je pagina? Welke browsers test je (en werkt het in geen enkele)? Toen je ging Googlen, waar heb je op gezocht en waarom zijn die oplossingen geen oplossing voor jou? Oftewel, iets meer zelfinzet (en aanvullingen in je startpost) zijn erg gewenst

[Bosmonster]

Cascading Stylesheet:

html,body{height:100%;}

Dit eruitmikken.

Ow en dit ook dan natuurlijk:

Cascading Stylesheet:

* html #box{height:100%;} /* height IE < 7 */
head+body #box{min-height:100%;} /* height IE 7 en de rest */

Sowieso word ik een beetje eng van al die hacks.. heb je wel eens van conditional statements gehoord?

height: 100% doet waarschijnlijk ik niet wat jij denkt dat het doet. De height van je document heb je feitelijk ook geen controle over. Op het moment dat je height: 100% nodig hebt, is de kans groot dat je al erg de verkeerde richting in aan het gaan bent, of je ontwerp niet echt webgeschikt is.

[ Voor 99% gewijzigd door Bosmonster op 23-07-2009 16:57 ]

[mkanon]

Ik heb daar ook al aangedacht, maar dat hielp bar weinig..ik test hem in IE8

Bosmonster schreef op donderdag 23 juli 2009 @ 16:54:

Cascading Stylesheet:

html,body{height:100%;}

Dit eruitmikken.

Ow en dit ook dan natuurlijk:

Cascading Stylesheet:

* html #box{height:100%;} /* height IE < 7 */
head+body #box{min-height:100%;} /* height IE 7 en de rest */

Sowieso word ik een beetje eng van al die hacks.. heb je wel eens van conditional statements gehoord?

height: 100% doet waarschijnlijk ik niet wat jij denkt dat het doet. De height van je document heb je feitelijk ook geen controle over. Op het moment dat je height: 100% nodig hebt, is de kans groot dat je al erg de verkeerde richting in aan het gaan bent, of je ontwerp niet echt webgeschikt is.

[ Voor 5% gewijzigd door mkanon op 23-07-2009 19:10 ]

[Bosmonster]

Als je de heights weghaalt en gewoon een overflow:hidden voor clearen toevoegt is het toch opgelost?

[ Voor 4% gewijzigd door Bosmonster op 23-07-2009 17:29 ]

[Marientjuh]

Gewoon de achtergrond als achtergrond van je body zetten?

Voorbeeldje:

Cascading Stylesheet:

background-color:FFFFFF;
background-image:url(bg.jpg);
background-attachment:fixed;
background-repeat:repeat-y;
background-position:top center;

Edit:
Oftewel Faux Columns
http://www.alistapart.com/articles/fauxcolumns/

[ Voor 14% gewijzigd door Marientjuh op 23-07-2009 17:35 . Reden: Faux columns toegevoegd ]

[r0b]

Cascading Stylesheet:

background-repeat: repeat;
background-repeat: repeat-y; 

Waarom staat dit er twee keer in Één "background-repeat: repeat;" moet al goed zijn voor x&y.

[mkanon]

Dan kan ik plots niet meer scrollen....

Bosmonster schreef op donderdag 23 juli 2009 @ 17:29:
Als je de heights weghaalt en gewoon een overflow:hidden voor clearen toevoegt is het toch opgelost?

[mkanon]

Hoe simpel kan het weer eens zijn!

Marientjuh schreef op donderdag 23 juli 2009 @ 17:34:
Gewoon de achtergrond als achtergrond van je body zetten?

Voorbeeldje:

Cascading Stylesheet:

background-color:FFFFFF;
background-image:url(bg.jpg);
background-attachment:fixed;
background-repeat:repeat-y;
background-position:top center;

Edit:
Oftewel Faux Columns
http://www.alistapart.com/articles/fauxcolumns/

[Bosmonster]

overflow:hidden op #box he, niet op je body/html

[PeterSelie]

Marientjuh schreef op donderdag 23 juli 2009 @ 17:34:

Cascading Stylesheet:

background-color:FFFFFF;
background-image:url(bg.jpg);
background-attachment:fixed;
background-repeat:repeat-y;
background-position:top center;

Zet alles er dan even shorthand in via background, in plaats van elke property op een apparte line:

Cascading Stylesheet:

background: #FFF url('bg.jpg') repeat-y fixed top center

Scheelt je weer lines, zorgt voor overzicht en weerhoudt je van properties dubbel te definen