Avatar billede hsm Nybegynder
18. april 2004 - 14:24 Der er 13 kommentarer og
1 løsning

background-image gentages

Hej eksperter!

Der er et problem jeg igen og igen støder på i CSS:

Når man vil sætte et baggrundsbillede på en div med fx:

.box
{
  background-image:url(bck.gif);
  height:200px;
  width:200px;
}

Lad os sige at bck.gif måler 100 x 100 - så sker der det at billedet gentages horizontalt og vertikalt. Fint nok, hvis ikke man vil have det til at ske kan man bruge

{
  background-image:url(bck.gif) no-repeat;
}

Men det får mod forventning ikke bck.gif til at vise sig én enkelt gang - derimod forsvinder den helt?

Jeg har prøvet at

{
  background-position:0px 0px;
}

men lige meget hjælper det. Jeg har kigget rundt på nettet og kan se at mange spørger om det, men har ikke fundet svaret nogle steder. Jeg har også prøvet at teste min CSS hos W3C, og den melder ok ...

Er der nogle af jer genier der kan skære det ud i pap for mig?
Avatar billede erikjacobsen Ekspert
18. april 2004 - 14:27 #1
http://www.html.dk/tutorials/css/lektion3.asp#background-repeat

.box
{
  background-image:url(bck.gif);
  background-repeat: no-repeat;
  height:200px;
  width:200px;
}
Avatar billede cdc Novice
18. april 2004 - 14:41 #2
url("bck.gif");
Avatar billede erikjacobsen Ekspert
18. april 2004 - 14:45 #3
Avatar billede roenving Novice
18. april 2004 - 15:39 #4
Hvorfor ikke bare f.eks.:

background:url('bck.gif') no-repeat center center #777;
Avatar billede roenving Novice
18. april 2004 - 16:05 #5
Der er 5 background-parametre:

background-attachment  (fixed|scroll)
background-color    (farve-definition|transparent)
background-image    (url('noget.gif')|none)
background-position    (længder|procenter||left|center|right||top|center|bottom) og
background-repeat  (repeat|repeat-x|repeat-y|no-repeat)

De kan angives hver for sig, eller samlet under background-hatten:

background:scroll transparent url('ditBillede.gif') center center no-repeat;

-- men det giver ikke mening at sætte en værdi fra en parameter ind under en anden, hvorfor det er helt forståeligt, at background-image med både url og en repeat på affærdiges som uforståelig...
Avatar billede cdc Novice
18. april 2004 - 16:36 #6
Der kan man se, man lærer noget nyt hver dag...  :o)
Avatar billede roenving Novice
18. april 2004 - 16:46 #7
>>erikjacobsen

Kig også på:

http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-image

hvor gnyfferne er genopstået, du kan også på w3c finde dokumenter, som angiver: 'url(bck.gif)' ...
Avatar billede erikjacobsen Ekspert
18. april 2004 - 18:29 #8
Jeg påpegede blot, at det ikke var fejlen. Ingen grund til at forvirre spørgeren.
Avatar billede roenving Novice
18. april 2004 - 19:23 #9
-- arh, sådan forstod jeg ikke din henvisning ...
-- men det er rigtigt, at der sjældent vil være egentlig behov for at sætte streng-afgrænsere på en url ...
Avatar billede hsm Nybegynder
20. april 2004 - 10:31 #10
Nå - så fik jeg det til at virke. Synes ellers allerede jeg havde prøvet det samme ... men sådan går det somme tider.

Det ser dog ud til at man skal undlade at bruge formen:

background-image:url(bck.gif) no-repeat;

men i stedet:

background-repeat: no-repeat;

selvom den første omtales i mange artikler.

erikjacobsen >> Drop et svar for points.
Avatar billede roenving Novice
20. april 2004 - 10:35 #11
background-image er præcis, hvad det siger:

_alene_ image ...

Hvis du vil angive andre parametre, skal du præcis angive dem i hver sin property eller samle dem under background: (se roenving @ 18/04-2004 16:05:50 !-)
Avatar billede erikjacobsen Ekspert
20. april 2004 - 10:55 #12
Tak, jeg samler ikke på point.

Men kan du ikke give et link til artikler, der omtaler formen:

  background-image:url(bck.gif) no-repeat;

så vi kan grine lidt af dem?
Avatar billede roenving Novice
20. april 2004 - 11:32 #13
*lol*

erik, det må altså ikke skrive sådan en stille tirsdag formiddag !-)
Avatar billede hsm Nybegynder
20. april 2004 - 17:24 #14
Jamen så tak for hjælpen da.
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