[CSS] Två bakgrundsbilder?

2009-10-14 13:16

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

Visa signatur

Rapportera Redigera

Citera flera Citera

2009-10-14 13:38

Permalänk

darkmoon

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.

Visa signatur

http://facebook.com/descendingchaos
http://johannesohlsson.se
http://qorner.se

Rapportera Redigera

Citera flera Citera

2009-10-14 13:41

Permalänk

Jobbbin

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.

Visa signatur

Rapportera Redigera

Citera flera Citera

2009-10-14 14:55

Permalänk

azoapes

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.

Visa signatur

På SoundCloud | Fästmöns galleri

Rapportera Redigera

Citera flera Citera

[CSS] Två bakgrundsbilder?

[CSS] Två bakgrundsbilder?

Externa nyheter

Spelnyheter från FZ