HTML kode for å plassere et bakgrunnsbilde i en fast senter

May 14

En bakgrunn som passer og blander jevnt med layout og innhold er nøkkelen til å gjøre et profesjonelt utseende nettsted. For å oppnå dette, kan riktig plassering være nødvendig. HTML kroppen bakgrunn attributt er frarådet så bruk stilark i stedet for å formatere bakgrunnsbilder. Med CSS-stiler, har du full kontroll over måten bilder vises og oppfører seg på websidene.

posisjonering

Et HTML-dokument kan ha et bakgrunnsbilde for hele siden, så vel som for bestemte elementer på siden, for eksempel et bord. CSS-stiler kan formatere disse bakgrunnsbilder på ulike måter. Styles beskrive effekter og attributter som navnet på kildefilen for bildet, frekvensen av som bildet gjentas på siden og posisjonen til bildet på dokumentet.

syntax

For å angi posisjonen og justering av et bakgrunnsbilde, må du bruke flere CSS bakgrunnsegenskaper, som hver styrer en bestemt egenskap. Du må bruke element at bildet er brukt for som velgeren i stilark. For eksempel, hvis den bakgrunnen du vil justere den viktigste bakgrunnsbilde, kan du bruke "kroppen" som velgeren, som det tilsvarer <body> -taggen i HTML.

Strukturen er den samme som alt CSS syntaks:

velger {eiendom: verdi;}

der "velgeren" er HTML-elementet, "eiendom" er attributtet eller effekt og "verdi" er at informasjonen for attributtet.

Egenskaper

Hver CSS bakgrunn hotellet har sin egen spesifikk funksjon. Den background-image egenskapen brukes til å ringe opp den spesifikke bildefilen. Bakgrunnen-repeat egenskapen avgjør hvor mange ganger det gjentas på siden. For å avgjøre om bildet "flyter" over på siden eller "pinner" til det når brukeren beveger seg på siden, bruker background-vedlegg. Slik angir justeringen av bildet, bruker du background-position. Merk at background-posisjon kan merkes opp i tekstformat som "sentrum", "venstre top", etc .; som prosent; som enheter; eller som "arver" - som betyr at det kommer til å bruke den samme posisjonen som en annen HTML-elementet som inneholder det. For å sette et bilde i midten av en side, kan du bruke "center center", "senter" eller "50% 50%."

eksempler

Et bakgrunnsbilde er formatert med CSS-stiler som er innebygd mellom <head> taggene i et HTML-dokument. Hvis merket opp i et eksternt stilark, fjerne kode som har pilene.

I dette eksempel er bakgrunnsbildet plasseres i midten av siden. Det er satt til "ingen gjentakelse" slik at bildet vises bare en gang, ikke flislagt som et mønster. Bakgrunnen er "fast" - hvis du flytter opp eller ned eller sidelengs på siden, det vil holde seg på samme sted på skjermen, som om flytende. For eksempel, hvis det er tekst på siden, vil teksten flytte, men bakgrunnen vil ikke. Hvis du vil at bildet skal bevege seg med resten av siden i stedet, skriver du "bla" i stedet for "fast" for background-vedlegg.

kropp

{

background-image: URL ( 'company.gif');

background-repeat: no-repeat;

background-attachment: fixed;

background-posisjon: center;

}

</ Style> </ head>