Sidbakgrund som ett Papper

Tjena
Jag har precis börjat på en ny sajt, där jag fått material av en designer.
Direkt har jag stött på problem, bakgrunden ska nämligen formas som ett papper.

Har tänkt och tänkt men kommer ingen vart, vet inte om jag är för trött eller vad det är, men kommer inte på hur jag ska lösa det här.

Bifogar detta papper som ska vara bakgrund, problemet är att det ska kunna växa på höjden utan att det ser konstigt ut.

Hur hade ni gjort, sidan ska kodas med XHTML och helt utan Tabeller.

Tack!

Använd png-filer så är det ju inga problem alls. Du skulle kunna placera bakgrundspappret absolut och sen ha det översta pappret i tre lager kanske. Med en top-, mitten- och botten-png. :)

Men hur ska den bilden kunna växa på längden utan att antingen proportionerna blir helt galna (om man tänker sig att använda absoluta mitten av den för att förlänga det hela) eller att det blir tokigt pixligt? :q

Eller är det nåt i png-formatet jag har missat? ;)

:stefan: skrev:

Men hur ska den bilden kunna växa på längden utan att antingen proportionerna blir helt galna (om man tänker sig att använda absoluta mitten av den för att förlänga det hela) eller att det blir tokigt pixligt? :q

Eller är det nåt i png-formatet jag har missat? ;)

Jag tänkte som så att man beskär det bakomliggande pappret i tre delar. Dessa tre delar placerar du sedan ut med position: absolute;. Sedan så är det ju bara att dela upp det översta pappret i tre divar. :)

Alltså, det bakomliggande pappret kommer alltid att ha samma proportioner eftersom det alltid kommer att ligga på samma ställe. Problemet kommer först när det översta pappret är mindre än det undre... Men man får väl göra en min-width. :)

Nu har jag tänkt om lite och kommit på en sak.
Det som :Stefan: säger stämmer ju, kommer ju se galet ut om jag drar ut pappret på höjden.
Det här är en enkel presentationssida, så jag får istället strypa texten istället, se till att pappret inte behöver vara längre än vad det redan är.

Kollade några andra skisser som har med sajten att göra och det ser ut som att designern i fråga inte tänkt ha sidan längre än pappret, så det löser sig nog iaf.

Tack för idéerna!

varför skulle det se galet ut i höjdled, om man bortser från skuggan?
pappret <div class=mitten>Content</div> ska omges av tre divar; vänster, höger, topp.

mao

<div class=papper>
  <h2>Rubrik</h2>
  <div class=left></div>
  <div class=content></div>
  <div class=right></div>
</div>

.papper {
  clear:both;
  float:left;
  width:500px; /* ställ in värde själv */
}
.papper h2 {
  float:left;
  width:500px; /* ställ in värde själv */
  height:50px; /* ställ in värde själv */
  background:url(papper_topp.jpg);
}
.papper .left {
  clear:both;
  float:left;
  width:50px; /* ställ in värde själv */
  height:250px; /* ställ in värde själv */
  background:url(papper_left.jpg) bottom no-repeat;
}
.papper .content {
  float:left;
  width:400px; /* ställ in värde själv */
  background:url(papper_content.jpg) bottom no-repeat #fff;
}
.papper .right {
  float:left;
  width:50px; /* ställ in värde själv */
  height:250px; /* ställ in värde själv */
  background:url(papper_right.jpg) bottom no-repeat;
}

så. du behöver nu klippa ut pappret för huvudinnehållet, minst 250px i höjdled i det här exemplet. sen 250px i höjdled av vänstra och högra flikarna som sticker ut bakom pappret som är längst fram. nu läggs bakgrunder på varje div i bestämd storlek, som inte repeteras och som placeras längst ner.
det lättaste av allt är ju givetvis om du bestämmer höjd på samtliga divar, typ 500px eller nåt. då är det lättare att positionera utan att använda position-attribut.

rörigt, jo jag tackar ;) men det går att lösa med lite pill :D