Hjälp med lösning på bakgrund

11 svar · 543 visningar · startad av oskob 26 jan. 2006

oskobMedlem sedan maj 20021 558 inlägg

Frågan26 jan. 2006 18:58#1

Hej!

Jag sitter och fundrar på smidigaste sätt att lösa följande:

Jag har en bakgrund som börjar med en liten fade som är en 400px och där faden slutar ska färgen loopas vidare med en liten ram. Det är ramen som ställer till det.
Förut hade jag bara en färg så då använde jag ju helt enkelt

#kalasbradiv {
background: url(bild.jpg) #123456 no-repeat;
}

Men nu är det inte en färg som ska ligga bakom utan en annan bild.
Det enda jag kan komma på är att göra tre lager: underst bakgrunden som loopar oändligt, en med faden överst och en med själva innehållet.
Detta verkar inte vara en speciellt intelligent lösning :/
Någon som har några förslag?

Tack på förhand!

oskobMedlem sedan maj 20021 558 inlägg

28 jan. 2006 20:46#2

Förklarar med en bild istället:

De två små randiga klossarna till vänster är själva byggstenarna. Den ena ska bara vara längst upp och den andra ska loopa i oändlighet.

InsiderMedlem sedan jan. 2000978 inlägg

28 jan. 2006 20:58#3

Kan du inte göra en bild som är 1-2 pixlar bred och 1800 pixlar hög och sätter repeat-x?

oskobMedlem sedan maj 20021 558 inlägg

28 jan. 2006 21:16#4

men det är inte snällt mot modemare :/ Bilden som ska loopas är 500px bred så det skulle nog bli tugnt. Och sen är sidan jättelång så det är ingen bra lösning.

OkkidoMedlem sedan maj 20007 492 inlägg

28 jan. 2006 21:27#5

den bakgrunden behover val inte vara mer an nagra pixlar bred?
#kalasbradiv {
background: #000 url(bild.jpg) repeat-x;
}

Sen..forstar jag inte resten av vad du menar.

oskobMedlem sedan maj 20021 558 inlägg

28 jan. 2006 23:26#6

Alltså, bilden jag bifogade är bara ett exempel. Den riktiga bakgrunden kräver full brädd.

OkkidoMedlem sedan maj 20007 492 inlägg

28 jan. 2006 23:52#7

Isafall borde du tanka om.

oskobMedlem sedan maj 20021 558 inlägg

28 jan. 2006 23:58#8

Det är det jag försöker, men jag kommer inte på ett bra sätt att lösa det på. Det "smartaste" verkar vara att lägga 3 lager på varandra, (loopande bakgrunde med full height, en med den lilla faden upptill och en med själva innehållet. Men det känns väldigt onödigt och dumt.

OkkidoMedlem sedan maj 20007 492 inlägg

29 jan. 2006 05:42#9

Visa oss layouten sa ska jag se om jag kan komma med en fenomenal losning.

OrientMedlem sedan sep. 200554 inlägg

29 jan. 2006 20:22#10

body {
background: url(ram.jpg) #123456;
}

#kalasbradiv {
background: url(fade.jpg) no-repeat;
width:100%;
}

Kan det vara nåt?

oskobMedlem sedan maj 20021 558 inlägg

30 jan. 2006 14:59#11

Hmm.... Jag skulle ju kunna baka in den i bakgrunden. Den kommer öka radikalt i storlek men det verkar vara den bästa lösningen just nu. Varför har jag inte tänkt på det tidigare?
Tack Orient!

oskobMedlem sedan maj 20021 558 inlägg

30 jan. 2006 15:06#12

Jag måste vara dum i huvet. Det är väl bara att göra såhör:
<div style="background: url(loopiloop.jpg);">
<div style="background: url(litengrejitoppen); y-repeatbla ">Heeej</div>
</div>