webForumDet fria alternativet

Bild i css?

7 svar · 4 522 visningar · startad av zapppa

zapppaMedlem sedan nov. 200728 inlägg
#1

Hej.

Jag håller på med en hemsida. Den är nästan klar.
Har haft en bakgrundsbild i en div-tag innan men jag skulle vilja ändra den till en bild så man kan förflytta den och ändra storlek.
För att inte behöva infoga <img.... osv. på varje htmldokument undrar jag om man kan infoga en bild med hjälp av css?

Tack i förhand
/Erik

Danne VMedlem sedan aug. 20068 090 inlägg
#2

Begriper faktiskt inte riktigt vad du menar. Men om du vill upprepa samma kodsnutt i flera sidor så måste du uju i alla fall skapa en form av "identifikation", dvs något som talar om att bilden ska in just på en särskild plats på sidorna, eller hur?

Antingen gör du det enkla: lägger in just img-taggen på varje sida där du vill ha den. Eller så gör du det via ssi (också på varje sida) som egentligen bara skapar en omväg till samma resultat, men som underlättar den dag du t.ex. vill byta bild eller redigera taggen på annat sätt.

Du kan iofs infoga som bakgrund via css (som du tydligen gjort förut), men då behöver du ju ha en särskild div eller nåt på varje sida.

zapppaMedlem sedan nov. 200728 inlägg
#3

Okej.
Jo ja har en div på varje sida. Hemsidan är nästan klar nu så det blir en del html-dokument. Jag undrar om det finns något man kan skriva i css:en så man kan lägga in en bild. Typ som att lägga in en bakgrund. Finns det någon css-tagg som man kan använda sig av?

Eller går det att ändra storleken på bakgrunden?

zcorpanMedlem sedan dec. 20042 245 inlägg
#4

Det går att använda generated content:

#mindiv::before { content:url(bild.png); display:block; width:300px; height:300px; }
zapppaMedlem sedan nov. 200728 inlägg
#5

okej låter suveränt. :)

men hur ska man göra för att det ska fungera. :( har hållt på att trixxa en stund nu. är det inte bara att infoga den i css-taggen?

Danne VMedlem sedan aug. 20068 090 inlägg
#6

Jag vet inte hur zcorpans förslag funkar i olika webbläsare. Har aldrig provat hans idé själv men anar att det kanske kan vara lite si och så med den saken....du får väl testa.

Men du måsta alltså lägga in en div på varje sida, dvs en "identifikation" som jag kallade det tidigare. zcorpan kallade divven för "mindiv" i sitt exempel. Så här alltså:

I varje sida lägger du in denna kod där du vill att bilden ska dyka upp:

<div id="mindiv"></div>

och i din stilmall skriver du in koden som zcorpan skrev. Självklart måste sökvägen till bilden och måtten stämma:

#mindiv::before { content:url(bild.png); display:block; width:300px; height:300px; }
zapppaMedlem sedan nov. 200728 inlägg
#7

okej.. jo har en div på varje sida som inte används.. men vad står before för?

Danne VMedlem sedan aug. 20068 090 inlägg
#8

zapppa skrev:

.. men vad står before för?

Man kan söka efter upplysningar på t.ex. google:
http://www.google.com/search?client=safari&rls=en&q=css+before&ie=UTF-8&oe=UTF-8
som bl.a. ledde till den här förklaringen:
http://www.w3.org/TR/REC-CSS2/generate.html#before-after-content
Om du alltså redan har en div med ett id (t.ex. "mindiv") på sidorna och tycker det är OK att ha bilden före den divven, så kan du använda dig av "mindiv.before" i stilmallen och behöver inte lägga in extra kod på sidorna.

126 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
124 ms — hämta tråd, inlägg och bilagor (db)