image background og CSS

morbid2 · 6. januar 2006

Med body-taggen går det greit å bruke image background sammen med repeat-x og repeat-y.

Men la oss si at du har to kolonner og vil ha et ulikt repeterende bakgrunnsmønster i disse to, som går fra topp til bunn - bakgrunnen skal altså IKKE justere seg etter brødteksten (p-taggen). Er det mulig å gjøre dette uten å lage 1 bilde som legges i body-taggen? Prøvde nettopp å lage en #innhold med tilhørende background image etc, men det dukket aldri opp noe bakgrunnsbilde i nettleser med <div id="innhold">. Er 1 bilde i body-taggen eneste løsning?

mohuhau · 6. januar 2006

Joda, dette skal ikke være noe problem. Kan vi få se koden du har prøvd med?

For å bruke eksempelet ditt med <div id="innhold"> så skulle css se noenlunde slik ut:

#innhold {
 background-image: url(bile.jpg);
 background-repeat: repeat-y;
}

Endret 6. januar 2006 av mohuhau

morbid2 · 6. januar 2006

Hei - det du kom med der var det første jeg gjorde, men det skjedde lite. Er vel ca. det samme, som jeg har her. Måtte fjerne float:left. Den gjorde ikke det den skulle.

Da dukket hvertfall bilde frem såfremt det var brødtekst i <div content>, men det repeterte seg ikke 100% nedover. Repeterte seg bare i forhold til brødtekst.

<body>
<div id="container">
<div id="banner"><img src="ToppBannerGIF.gif" /></div>
<div id="content"></div>

</div> <!-- container slutt -->
</body>


*************************************
#content {
float: left;
margin-top:-5px;
margin-left:22px;
background-image:url(Hovedinnhold_bakgrunnSortSt.gif);
background-repeat: repeat-y;
}

Endret 6. januar 2006 av morbid2

mohuhau · 6. januar 2006

Dette kommer av at #content ikke er større enn brødteksten. Sett height:100% på body #container og #content.

morbid2 · 6. januar 2006

Ai, det hørtes fornuftig ut og det virket lovende da jeg prøvde i IE, men i Opera og Mozilla var det ingen forandring :cry:

mohuhau · 6. januar 2006

Glømte å si at du må legge 100% på html også

Så må du fjerne margin, padding og border på #content og alle elementer som #content ligger inni for å slippe scrollbar når det ikke er nødvendig.

morbid2 · 6. januar 2006

Aha, men da satser jeg på at det går seg til her. Du vet ikke om det tilfeldigvis går an å reptere en bakgrunn i form av angitt px-verdi?

F eks hvis du har et lite bakgrunnselement på 4*4px og vil at den skal repeteres helt ned, men bare 200px i x-retning for på den måten å dekke et 200px bredt område med dette bakgrunnselementet. Har prøvd å sette f eks

background-repeat: repeat-x 200px; men da skjedde det ingenting.

EDIT//

Fant ut av det sistnevnte. Måtte sette en width og bruke kun repeat :w00t:

Endret 6. januar 2006 av morbid2

Logg inn

image background og CSS

Anbefalte innlegg

morbid2

Videoannonse

mohuhau

morbid2

mohuhau

morbid2

mohuhau

morbid2

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer