Hvordan lage et bakgrunns opphold på venstre side i CSS

Plassere en websidens bakgrunnsbildet er som kunst, samt et programmerings oppgave. Velplasserte bakgrunn kan slå en vanlig side i et kunstverk. Site designere, for eksempel, kan bruke Cascading Style Sheets å posisjonere bakgrunnsbilder noe de liker på en side. Mange nettsted eiere holde sin bakgrunn i sentrum av sidene sine, for å skape en unik "off-center" look, bruk CSS for å forankre din bakgrunn til venstre side av nettleseren.

Bruksanvisning

1 Åpne en webside dokument med Notepad eller en HTML-editor.

2 Finn dokumentet åpnings "<head>" tag, og lim inn følgende CSS-koden etter at tag:

<Style type = "text / css">

kropp

{Background: URL ( 'My_Image.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-posisjon: left toppen;

margin-left: 10px;

margin-top: 10px;

}

</ Style>

Disse CSS egenskaper definerer kroppens bakgrunnsbilde, posisjon og marginer. Bakgrunnen-vedlegg boligens verdi er "fast" i dette eksempelet. Hvis du ønsker at bakgrunnsbildet til å bevege seg vertikalt når brukere bla nedover siden, endring "fast" til "bla". Den "background-position" eiendom plasserer bildet på venstre side av nettsiden. Endre ordet "topp" til "sentrum" for å beholde bildet sentrert på venstre side av nettleseren. Change "top" til bunn for å gjøre bildet forblir i nettleserens venstre hjørne. De "margin-left" og "margin-top" verdier - i piksler - definere bakgrunnsbilder til venstre og øverst marginer. Endre disse verdiene til noe du liker.

3 Finn "My_Image", jpg "i CSS-koden som er definert i forrige trinn Erstatt det med navnet på et bilde på harddisken for eksempel ønsker å bruke.." C: \ Bilder \ Tree.jpg "som bakgrunn, gjør bakgrunnen: URL erklæring se slik ut:

bakgrunn: URL ( 'C: \ Bilder \ Tree.jpg');

Du kan også bruke en URL i stedet for et filnavn hvis bildet ligger på nettet.

4 Lagre dokumentet og starte nettleseren din. Åpne Web og merk at bakgrunnsbildet vises på venstre side av siden.

Hint

  • Eksperimenter med "margin-left" og margin-right "verdier som er definert i CSS. Disse egenskapene gir deg presis kontroll over hvor bakgrunnsbildet vises på venstre side av nettsiden. Hvis bildet ser til nær toppen av siden, øke verdien av "margin-top" for å flytte bildet ned litt. Øk avstanden mellom bildet og til venstre på siden ved å øke verdien av "margin-left".