HTML kode for No Gjentakende Bakgrunn
Bakgrunner kan gjøre eller ødelegge webdesign. En påtrengende bakgrunn kan distrahere, irritere og selv kjøre bort besøkende; mens en hensiktsmessig og godt plassert bakgrunn kan trekke i lesere uten dem selv merker det. Som standard bakgrunner gjenta seg selv. Hvis det gjør nettstedet ditt ser altfor opptatt og distraherende, bruke en ikke-repeat-kode for å overstyre standardinnstillingen.
Beskrivelse
I tidligere versjoner av HTML, <body> -taggen ble brukt for å beskrive bakgrunnen attributtene til en webside, inkludert dets bakgrunnsbilde. For å gjøre dette, startes du attributtet "bakgrunnen" i <body> -taggen. For eksempel: <body bakgrunn = "bg.jpg"> der <body> er koden, er bakgrunnen attributtet og "bg.jpg" er verdien av attributtet. Hvis bakgrunnsbildet var mindre enn websiden, bildet gjentok seg. Denne koden er nå foreldet i favør av de nyere metode: Cascading Style Sheets eller CSS.
syntax
For å gjøre et bakgrunnsbilde ikke gjenta seg på en webside, må du bruke en eller flere CSS bakgrunnsegenskaper for velger du ønsker å bruke den til. Eiendommen "bakgrunn" kan angi flere egenskaper (for eksempel farge, størrelse, etc.) i en enkelt erklæring. Hvis du ikke ønsker å bruke denne kortere versjon, kan du sette hver eiendom med egen erklæring.
eksempler
Ved hjelp av stenografi metoden, erklærer bakgrunnsbildet og no-repeat stil som følger i <head> delen av websiden:
<Style type = "text / css">
body {background: URL ( 'bg.jpg') no-repeat;}
</ Style>
Å erklære det samme med flere eiendommer:
<Style type = "text / css">
body {background-image: URL ( 'bg.jpg'); background-repeat: no-repeat;}
</ Style>
Tips
Det er god praksis å opprette en egen CSS eller stilark fil i stedet for å sette inn stiler i hver av websidene. I tilfelle du trenger å gjøre endringer, kan du redigere bare CSS-filen og alle sidene vil gjenspeile endringen. Du ville ikke trenger å redigere hver side. Hvis du vil koble til et stilark fra en side:
<Head>
<Link rel = "stylesheet" type = "text / css" href = "mystylesheet.css" />
</ Head>