Jag surfade runt och titta på fina hemsidor, och märkte att alla verkar vara besatta av att ha någon slags scanlines som bakgrund på hemsidorna sina. Vilket är förståeligt, då det är fint.
Inspirerad, tänkte jag göra en liknande bakgrund till min hemsida, men så stötte jag ¨på ett problem.
Om innehållet skall vara centrerat, och kunna fortsätta i oändlighet nedåt (om det finns så mycket innehåll), och jag ändå tvunget vill ha en toning runtomkring innehållet. Hur passar jag då ihop linjerna?
För att jag inte själv ens förstår min förklaring, så har jag gjort ett exempel:
Ett smidigt sätt att lösa detta borde väl finnas, men jag kan inte lista ut det... Hur hade ni gjort?
Ändrat bilderna? Någon smidig lösning i html/css? Struntat i hela saken och ätit glass?
Alla förslag välkomna! (Förutom de oseriösa, dvs äta glass)
Jag har gjort något liknande en gång och då sett till att lagret alltid ligger på en jämn (alt udda) x-koordinat med javascript.
Något sånt här:
// Hur du får reda på sidans och lagrets bredd är ditt problem...
tempLeft = (pageWidth - layerWidth)/2;
// Avrunda
realLeft = 2 * parseInt(tempLeft / 2);
Detta kommer du inte förbi.
Ett annat alternativ är att använda semi-transparenta png-bilder till skuggan. Sådana skapar du enkelt med photoshop, i annat fall kan jag fixa det åt dig. Stödfinns i alla webbläsare med lite trick.
Då försvinner problemet eftersom ränderna inte finns i skugg-bilden.
Ja, PNG-bilder har även jag funderat på. Men jag hade för mig att IE inte hade stöd för transparens. Men om du har tricks, som inte är alltför trickiga av sig, så dela med dig. Jag är idel öra.
Lösning 1. Du kan göra en jätte lång bakgrundsbild som innehåller alla element av bakgrunden.
Oberoende av vilken upplösning man har räcker den över hela skärmen. Genom att göra den jättesmal blir inte filen speciellt stor.
Sen kör du denna CSS:
body {background: transparent url(filnamn.gif) repeat-y top center;}
Då kommer alltid mitten av bilden ligga centrerad.
Lösning 2. Du gör en kort skugga på sidorna så pass mörk att man inte lägger märke till att ränderna slutar.
