Avatar billede smogle Nybegynder
18. december 2008 - 11:36 Der er 5 kommentarer

stræk baggrundsbillede i div tag

Jeg har et div tag som skal strække billedet kun i højden alt afhængig af hvormeget indhold der er i div tagget. Billedet er 900x30 hvor breden er låst på 900 px. Lige nu laver browseren bare repeat-x, hvilket ikke er helt optimalt.

div#baggrundsbillede {
    background-image: url(nav_886.gif);
        height: ???
        width: 900px;
        margin-right: 7px;
    margin-left: 7px;
}
Avatar billede olebole Juniormester
18. december 2008 - 13:28 #1
<ole>

Baggrundsbilleder kan ikke strækkes. Hvis ikke du kan angive højden for div'et, kan du ikke engang lave et hack

/mvh
</bole>
Avatar billede cronaldo Nybegynder
20. december 2008 - 16:27 #2
Hvorfor ikke bare gøre følgende:

div#baggrundsbillede {
height: 900px;
width: 900px;
margin-right: 7px;
margin-left:7px;
z-index: 0; /* Dette skulle rette, så billedet ligger bagerst - mener z-index er sat til 1 "fra start" */
}
Avatar billede cronaldo Nybegynder
20. december 2008 - 16:30 #3
Jeg har lige tjekket, og desværre kræver z-index at du har sat det på alle dine elementer for at angive hvilket "lag" de skal ligge i. Samtidig skal du også have brugt "position" på dit tag.. hmmm ..
Avatar billede olebole Juniormester
20. december 2008 - 17:45 #4
cronaldo >> Da divet varierer i højden, kan han ikke angive højden for baggrundsbilledet på forhånd - og så er der ingen CSS-løsning  =)
Avatar billede bjoarn Nybegynder
07. januar 2009 - 13:50 #5
CSS kan som nævnt ikke ændre på billedets proportioner.
Nu ved jeg jo ikke hvad din grafik ligner, men du kunne jo i stedet lave et baggrundsbillede som var høj nok ligemeget hvilket indhold du kom ind i elementer.

Hvis grafikken er gradueret eller lignende kan man godt stadig lave fine visuelle løsninger, fx ved at linke baggrunden til toppen eller bunden af elementet og så lade farve forsætte i resten af elementen ved at sætte baggrundsfarven til den farve din graduering slutter med.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester