Overlappende bakgrunner, mulig?

[BALT3]

Hei.

 

Vanligvis er jeg flink å finne og forstå tutorials på nettet når jeg må finne ut av noe som jeg egentlig ikke forstår meg på. Denne gangen er jeg nødt å gi opp.

 

Saken er den at jeg har en Wordpress-blogg (på eget domene), og for en tid tilbake fant jeg endelig ut hvor og hvordan man fikset bakgrunn med et enkelt 8x8-bilde. Men den originale bakgrunnen besto av en enkelt farge og et .gif-bilde som var 1x650 pixler og gjentatt bortover (repeat-x) slik at bakgrunnen fadet mot toppen av siden. Dette var en fin effekt, men jeg ønsker 8x8-bildet siden siden passer bra med diagonale striper.

 

Etter å ha eksperimentert litt i Photoshop, fant jeg ut at det ville sett veldig bra ut om jeg kunne brukt 8x8-bildet samtidig som 1x650-bildet, slik at jeg fikk en stripete bakgrunn som fadet mot toppen.

 

Slik jeg har forstått det så er det mulig, men komplisert å få til i CSS. Er det mulig? Kan noen hjelpe meg?

 

Slik ser koden for bakgrunn ut i style.css:

 

body {
background: #42afdc url(images/html-bg.gif) repeat-x;
font: 75%/170% Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
color: #333333;
}

 

Takk på forhånd til den som tar seg bryet med å hjelpe en ny nybegynner innen webdesign

[Left Blank]

Er det mulig a lage et 80x650 bildet, hvor du overlayer 80x80 over det originale 650x bildet i photoshop?

Endret 4. august 2008 av coax

[BALT3]

Vel, nei.

 

Da får jeg jo bare striper på de øverste 650 pixlene, mens alt under blir ensfarget. For at dette skal funke er jeg nødt å bruke to bilder...

 

.

[Left Blank]

Men hvis bildet du legger over 80x80 er 650px vertikalt, vil det jo bare dekke de 650 pixelene.. (uansett teknikk) eller?

 

Men uansett, jeg googlet litt og fant disse:

 

http://haacked.com/archive/2005/04/04/2541.aspx

http://www.velocityreviews.com/forums/t157...s-possible.html

 

Jeg har ikke testet ut noen teknikker selv for i ditt tilfelle matte jeg da photoshoppe noen bilder, lage en html og css, og det kan ta lang tid.. Du ma prove selv kanskje de linkene kan hjelpe.

[BALT3]

Altså, hvis jeg blander bildene i Photoshop får jeg striper øverst, som blir lysere og lysere og som til slutt fader helt ut i bakgrunnens farge nedover (jeg har forresten det på bloggen nå, litt striper ser bedre ut enn ingen striper...).

 

Det jeg ønsker er det omvendte, stripete bakgrunn som fader ut i en mørkere farge øverst på siden, slik som dette:

 

[Jonas]

Effekten er fullt mulig å skape, men ikke som overlappende bakgrunnsbilder. Hvertfall ikke med dagens CSS-versjon. Måten du kan gjøre det på er ved å sette rutene som bakgrunn på body og opprette en div som strekker seg 100% i bredden og som er absolutt posisjonert på toppen, under alt annet. I denne setter du gradient-bakgrunnen.

[Stian Jacobsen]

Det irriterer meg grenseløst når folk som ikke har peiling prøver å gi svar..!!!!

Sencured, det du gjør er å legge to div's med forskjellige bakgrunsbilder, så legger du din eksisterende markup

inne i de.

 

eks:

 

 

div.top {
background: url(http://www.norsafe.no/gfx/bgTopFade.png) repeat-x;
}
div.bottom {
background: url(http://www.stemplate.com/assets/files/downloads/backgrounds/background3.jpg);
}

<div class="bottom">
<div class="top">
DIN MARKUP HER!!!!!!!!!
</div></div>

 

Bilder som er brukt er tilfeldig funnet på google!

Du må også benytte deg av en 100% høyde og 100% bredde for å få dette til å se bra ut

 

For å oppnå dette må du ha 100% høyde i både body og html, samt 0 på margin og padding

så i den div'en du ønsker;

position: relative;

width: 100%;

height: 100%;

height: auto;

min-height: 100%;