Hvordan laver browseren baggrunden bag min webside

Indhold er konge på internettet, men dårlig hjemmeside design kan ødelægge oplevelsen og vende sig bort læsere. Det mest synlige element er baggrunden. Det kan være en fast farve, et gentaget billede eller en fuld-farvefoto. Du kan bruge alle tre.

Vejledning

• Liste billedsprog dit websted indhold bringer tankerne. Hvis dit websted bruger et logo eller avatar, bruge den som udgangspunkt for listen.

2. Overvej indhold og anvendelse. En baggrund kan påvirke belastning gange og øjnene. Belastning gange skal være hurtig, og belastning af øjnene bør holdes på et minimum.

• Opret, provision eller søge efter mulige baggrundsbilleder. Respekter ophavsrettigheder. Aldrig antage, at billeder på internettet er lovligt for dig at bruge.

• Test dine foretrukne billeder, skrifttyper og farver. Dette vil hjælpe dig med at finde den bedste kombination for dit websted.

• Resize billedet. De fleste computere har en skærmopløsning på 1024x768. Hvis du planlægger at bruge en enkelt, fast billede, holde denne størrelse i tankerne.

• Sæt de vigtigste visuelle elementer på venstre side. Mindre beslutninger og vinduesstørrelser vil beskære din baggrund fra den højre side.

• Gem filen som en JPG eller PNG. JPG fungerer bedst for fotografier og PNG til illustrationer.

4. Hold billedets filstørrelse under 100 KB. Det vil holde rendering tid ned for siden.

• Indstil en baggrundsfarve. Type: body {background-color: # FF0000;} Farver kan også angives af et navn, body {background-color: red;} eller ved RGB, {background-color: rgb (255,0,0);} .

• Indstil et baggrundsbillede. Type: body {background-image: url ("myimage.jpg ');} Som standard billedet fliser i alle retninger.

• Indstil hvordan billedet fliser. Type: body {background-image: url ("myimage.jpg '); baggrund-repeat: repeat-x; } "Gentag-x" sætter fliser kun vandret. Brug "repeat-y" for lodret fliser.

• Opret et ikke-tilbagevendende billede, ruller med siden. Type: body {background-image: url ("myimage.jpg '); baggrund-repeat: no-repeat; }

• Fastgør billedet, så teksten ruller over det hele. Type: body {background-image: url ("myimage.jpg '); baggrund-repeat: no-repeat; background-attachment: fast; }