Trädvy Permalänk
Medlem
Plats
Stockholm/Västervik
Registrerad
Maj 2006

[CSS] Två bakgrundsbilder?

Tjena!
Jag har ett problem jag har försökt lösa ett tag nu och jag börjar få slut på idéer.
Det är så att jag vill ha en bakgrundsbild med no-repeat, sen till höger om denna, vill jag ha en vertikal bild som jag sedan repeterar åt höger.
Kanske blir lättare om jag visar hur jag menar.
http://tinyurl.com/yknwerj
Designar sidan åt en kompis, därför har jag klippt bort bilderna på henne, det är därför headern ser fuckad ut.
Iaf, där den ljusrosa bakgrunden tar slut vill jag ha nästa bild med repeat-y.

Första delen av CSS:n

body { background: #e04cc1 url(bg.png) no-repeat; } div#wrapper { margin: 0 auto 20px auto; width: 750px; } div#header { float: left; clear: left; display: inline; padding: 0 px 20px 20px; border-bottom: 1px solid #ddd; width: 710px; }

Har googlat endel och testat olika metoder men inte lyckats!
Säg till om ni behöver mer av koden.
Tack på förhand

Nintendomulator: Projektlogg
Main: Intel Core i5 2500k | Radeon 6950 2GB | Corsair Vengence 8GB | Intel SSD 120GB |
Server: MSI k8 Neo4 s939 | AMD 1800+ @ 2,5 GHz | Corsair 2 GB |
HTPC: Jetway NC81-LF (Mini-ITX) | 1TB 7200rpm | PC5300 2GB | AMD X2 4850e 2,5 GHz | 110w PicoPSU | Projektfilm

Trädvy Permalänk
Medlem
Plats
Stenungsund
Registrerad
Sep 2004

Hmmm... ska det vara mönster på den bakgrunden som ska repeteras?

Du kan ju göra en enda lång bakgrundsbild (jävligt bred om du nu ska ha mönster) som är ett par pixlar hög, beroende på eventuellt mönster.

Men mitt råd, om du inte vill ge dig in på att arbeta med absolute är att tänka om.

Trädvy Permalänk
Medlem
Plats
Stockholm/Västervik
Registrerad
Maj 2006
Citat:

Ursprungligen inskrivet av darkmoon
Hmmm... ska det vara mönster på den bakgrunden som ska repeteras?

Du kan ju göra en enda lång bakgrundsbild (jävligt bred om du nu ska ha mönster) som är ett par pixlar hög, beroende på eventuellt mönster.

Men mitt råd, om du inte vill ge dig in på att arbeta med absolute är att tänka om.

Tack för svaret.

Inget mönster direkt, utan bara en vanlig övertoning som passar den andra bilden.
Jag har tänkt på de också, men de är ju inte speciellt effektivt, bilden blir större än nödvändigt och tar längre tid att ladda. Vill ju att den ska anpassas till användarens upplösning.

Vad finns de för altenativ?

edit: vet inte om jag förstod dig rätt, men jag har redan gjort en sån strip som du menar, fast tvärtom, ett par pixlar bred och typ 1000 pixlar hög.

Nintendomulator: Projektlogg
Main: Intel Core i5 2500k | Radeon 6950 2GB | Corsair Vengence 8GB | Intel SSD 120GB |
Server: MSI k8 Neo4 s939 | AMD 1800+ @ 2,5 GHz | Corsair 2 GB |
HTPC: Jetway NC81-LF (Mini-ITX) | 1TB 7200rpm | PC5300 2GB | AMD X2 4850e 2,5 GHz | 110w PicoPSU | Projektfilm

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

Lägg inte bakgrundsbilden på body. Gör en div id="bg-repeat" istället som du sätter position: absolute; på och right: 0; som du använder för den repeterande i x-led, alltså som är 1000 px hög och 1 px bred.

Sedan lägger du in en div id="bg" inuti #bg-repeat som du sätter position: absolute; på och left: 0;

Det borde funka. Alltså:

#bg-repeat { background: url(bakgrund-repeterande.jpg) repeat-x; position: absolute; right: 0; } #bg-repeat #bg { background: url(bakgrund-topp.jpg) no-repeat; position: absolute; left: 0; }

<body> <div id="bg-repeat"> <div id="bg"></div> </div> </body>

Använder div för att det är ett naturligt blockelement, det blir en aning enklare.

Om du använder detta och sedan tänker till lite, kommer du upptäcka att du inte behöver ha en så stor bakgrund-topp.jpg utan det räcker med att bakgrund-topp.jpg innehåller den lila/cerisa krusedullen.