Jag har en div där jag har en bild som jag vill repeat vertikalt.
Men jag vill att repeaten ska börja ca 100px ner på divv-en och sedan repeata hela vägen till slutet.
Går det? Har försökt hejvilt utan att lyckas. Inte heller lätt att googla saken..
Bakgrundsbild som ska repeatas
9 svar · 815 visningar · startad av pawe
div.mindiv {
background: url(bild.gif) repeat-y #ffffff 0px 100px;
}
Med de sista två värdena anger du positionen. Osäker dock hur detta stöds i olika läsare.
Är du säker att det fungerar?
Det är precis så där jag försökt göra. Har testat nu också utan framgång. Stöds det av någon läsare? :)
Hmm...
Om du vill ha "icke-bakgrund" överst och sedan ev vertikal repetering över resten av divvens höjd så gör det tyvärr inte det.
y-positionen i det exemplet anger var repetitionen skall "bryta" mellan två av de repeterande bilderna, inte var repetitionen skall börja.
Det du kan göra (beroende på exakt vad du försöker göra förstås) är att lägga en top-margin på 100px på din div (med allt det innebär av hur det också påverkar ev. innehåll du tänker dig ha i divven)
... så om det går eller inte beror på vad du tänkt ha i din div, och hur den divven läggs ut på sidan i ett större sammanhang.
..eller så kan du göra bilden så att du har en solid färg de första 100 pixlarna innan gradienten (eller vad det nu är som ska loopas) börjar.
MickeA.com säger vad jag tänker. (Fast jag tänke föreslå ett genomskingligt parti istf en solid färg.)
... men med en genomskinligt / solitt parti av bakgrundsbilden, får du å andra sidan helt enkelt avstå från din ambition att bakgrundsbilden skall repeteras med repeat-y (eftersom även den "genomskinliga" delen av bilden då kommer att repeteras och ge "hål" i vertikalranden med jämna mellanrum) och istället göra bakgrundsbilden så hög att den aldrig "tar slut" under din sidas innehåll ... ;)
Så - ge oss fler detaljer över hur du tänkt dig använda divven med y-repeteringen i sitt kompletta sammanhang så kanske vi kan kläcka en lösning åt dig :)
Om ni kikar på den bifogade bilden så kanske ni förstår vad jag vill åstadkomma.
Har en ruta som har en ram (skuggad ram) som ligger runt rutan. I rutan fadas färgen från grå i toppen till svart resterande. Denna fadning skall alltså pågå under text och bild.
Se på bilden så förstår ni nog :)
Några tips?
Problemet blir egentligen att man måste ha två bakgrundsbilder till samma div. En som innehåller fadningen av färgen längst upp...sedan ska en bild för att få till skuggningen på sidorna tilas nedåt efter den första bilden.
Om ni kikar på den bifogade bilden så kanske ni förstår vad jag vill åstadkomma.
Har en ruta som har en ram (skuggad ram) som ligger runt rutan. I rutan fadas färgen från grå i toppen till svart resterande. Denna fadning skall alltså pågå under text och bild.
Se på bilden så förstår ni nog :)
Några tips?
"meny" väl inte med diven och bakgrundsbilden att göra, va?
I så fall: antingen lägger du in en div (eller en span eller en p-tag eller en h-tag eller vad som helst) överst inuti den andra. Åsså tar du olika bakgrund till varje. Det ska funka oavsett om användaren t.ex. använder extremt stora fonter så att elementen växer vertikalt.
Eller så gör du helt enkelt en bakgrundsbild i Photoshop som motsvarar dina krav. Men då kan det bli lite fel om t.ex. rubriken blir väldigt hög.