Hvordan lage et bakgrunns Stretch over skjermen i CSS

November 17

De fleste nettsteder benytter statiske bakgrunnsbilder som enten viser på ett sted på skjermen eller gjenta horisontalt, vertikalt eller i en flislagt repetisjon. Du kan imidlertid gjøre en bakgrunn strekningen også. Dette trikset er nyttig når du ønsker å lage en stor grafisk for bakgrunnen på ditt nettsted. Legge til en strekk bakgrunn til en webside tar litt ekstra arbeid skjønt. Du må redigere HTML-koden samt CSS (Cascading Style Sheets) kode.

Bruksanvisning

1 Åpne stilark for websiden i Notepad eller en kode editor. Finn kroppens stil regel:

kropp {
}

2 Legg en 100 prosent høyde for kroppen inne i sin stil regelen. Også gi kroppen en null-piksel margin og null-pixel padding:

kropp {
height: 100%;
margin: 0;
padding: 0;
}

3 Lag en ny stil regel for et ID-navn "bakgrunn" og legg til en 100 prosent bredde og høyde:

bakgrunn {

width: 100%;
height: 100%;
}

4 Gi bakgrunnen regel en fast stilling ved null piksler fra toppen og null piksler fra venstre på skjermbildet webleser kanten:

bakgrunn {

width: 100%;
height: 100%;
stilling: fast;
top: 0;
venstre: 0;
}

5 Legg en stil regel for innholdet på websiden. Denne stilen regel trenger en relativ posisjon og en "z-index" verdien av en eller høyere for å gjøre innhold opphold på toppen av bakgrunnen:

innhold {

position: relative;
z-index: 1;
}

Hvis CSS-koden inneholder andre "z-index" egenskaper, sørg for at verdien du gir innholdet er lavere enn noe som må vises på toppen av innhold.

6 Åpne websiden i et redigeringsprogram og vikle et par av "<div>" koder rundt hele innholdet. Gi kodene en ID navnet "innhold":

Page content here...

</ Div>

7 Legg til et bilde over innholdet er "<div>" tags og gi det et ID Sett "src" attributt til filen banen og navnet på bakgrunnsbildet du vil "bakgrunn.":

Hint

Fjern "height: 100%;" linje fra bakgrunnen stil regelen hvis du bare vil at bakgrunnen skal strekke horisontalt.
Når du utformer et bakgrunnsbilde som du ønsker å strekke seg over skjermen huske på at skjermstørrelser varierer mye og forvrenge bildet.