spørsmål om background i css

[Tha_Zaynt]

Jeg lurte bare på om det er mulig å bruke:

 

background: url(blabla.jpg);

og

background-image: (blabla.jpg);

 

på samme element, eller går disse for det samme?

 

Grunnen til at jeg spør er fordi jeg driver å lager en meny som ska ha både bullets og et annet bilde som bakgrunn samtidig. Hvis ikke, er det noen annen måte og få til dette på?

 

EDIT: Løste det ved at jeg satte bullet som background i <li> elementet og satte det andre bakgrunnsbildet som background i #menu li a.

 

At jeg ikke tenke på det til å begynne med

Endret 19. juli 2005 av Tha_Zaynt

[Tha_Zaynt]

hvordan får jeg forresten bakgrunnsbildet på a-elementet og a:hover til å fylle hele boksen og ikke bare bak selve teksten?

 

Slik ser det ut nå

 

style.css

#menu{
list-style-type: none;
}

#menu li{
margin-left: -10px;
background: url(images/menuarrow.gif) no-repeat;
padding-left: 23px;
border-bottom: 1px solid #848484;
background-position: 0.5em 0.3em;
height:19px;
width:97px;
}

#menu li a{
background: url(images/backmenu.jpg) repeat-x;
width: 120px;
height: 19px;
color: #333;
text-decoration: none;
}

#menu li a:hover{
background: url(images/backmenuhover.jpg) repeat-x;
width: 120px;
height: 19px;
color: #333;
text-decoration: none;
}

[mikk-]

Du sier du skal ha bullets og bakgrunn samtidig. Ja, så hvorfor ikke ha bullets og bakgrunn, da!?

 

ul {
background-image: url(background.gif);
list-style-image: url(bullet.gif);
}

 

For å svare på det første spørsmålet også:

"Background" er en kortform for alle background-propertyene, slik som background-color, backgrond-image også videre. Du må uansett bruke "url" foran parentesene. Forskjellen er at i "background" kan du skrive verdiene fra alle de forskjellige background-propertyene samlet. Eksempel:

I stedet for dette:
item {
 background-image: url(background.gif);
 background-position: top right;
 background-repeat: no-repeat;
 background-color: #fff;
}
_dette!_
item {
 background: url(background.gif) top right no-repeat #fff;
}

Smart, hæ? =)

[resol]

skal ikke se bort ifra at det kan hjelpe med display:block;

[Tha_Zaynt]

hmm..kommer et skritt nærmere, men ikke helt i mål. Problemet er at bulleten forsvinner..

 

Sånn ser det ut nå

 

oppdatert kode

#menu li{
margin-left: -10px;
list-style-image: url(images/menuarrow.gif) no-repeat #333;
background: url(images/backmenu.jpg) repeat-x;
padding-left: 23px;
border-bottom: 1px solid #848484;
height:19px;
width:97px;
display: block; 
}

#menu li a{
color: #333;
text-decoration: none;
display: block; 
}

#menu li a:hover{
background: url(images/backmenuhover.jpg) repeat-x #333 100%;
display: block; 
text-decoration: none;
}

Endret 19. juli 2005 av Tha_Zaynt

[_Paulsen_]

Prøv å legg til:

 

list-style: none;

 

i den aktuelle koden din...

[Tha_Zaynt]

fungerer enda ikke med denne koden:

 

Slik ser det ut nå

 

#menu ul{
list-style: none;
}

#menu li{
margin-left: -9px;
list-style-image: url(images/menuarrow.gif) no-repeat;
background: url(images/backmenu.jpg) repeat-x;
padding-left: 23px;
border-bottom: 1px solid #848484;
height:19px;
width:96px;
display: block; 
}

#menu li a{
color: #333;
text-decoration: none;
display: block; 
}

#menu li a:hover{
color: #fff;
margin-left: -23px;
padding-left: 23px;
background: url(images/backmenuhover.jpg) repeat-x;
height:19px;
width:96px;
display: block; 
text-decoration: none;
}

[resol]

får du ikke satt list-style på ul da?

[Tha_Zaynt]

har satt

 

#menu{

list-style-image: url(images/menuarrow.gif);

}

 

men ser ikke ut til at det har noen virkning...