CSS baggrundsstørrelsesvejledning til baggrundsbillede - Sådan kodes et baggrundsbillede af en fuld side

Denne vejledning viser dig en enkel måde at kode et helsides baggrundsbillede ved hjælp af CSS. Og du lærer også, hvordan du får det billede til at reagere på dine brugeres skærmstørrelse.

At få et baggrundsbillede til at strække sig fuldt ud for at dække hele browserens visningsport er en almindelig opgave i webdesign. Heldigvis kan denne opgave løses med et par linjer CSS.

Cover Viewport med billede

For det første vil vi sikre os, at vores side faktisk dækker hele visningen:

html { min-height: 100%; }

Inde htmlbruger vi background-imageegenskaben til at indstille billedet:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Magi af egenskaben 'Baggrundsstørrelse'

Magien sker med background-sizeejendommen:

background-size: cover;

coverfortæller browseren at sikre sig, at billedet altid dækker hele containeren, i dette tilfælde html. Browseren dækker containeren, selvom den skal strække billedet eller skære en smule uden for kanterne.

Da browseren muligvis strækker billedet, skal du bruge et baggrundsbillede, der har høj nok opløsning. Ellers kan billedet se pixeleret ud.

Hvis du er interesseret i at have hele billedet vist i baggrunden, skal du sørge for, at billedet er relativt tæt i billedformat sammenlignet med skærmstørrelsen.

Sådan finjusteres en billedposition og undgår fliser

Browseren kan også vælge at få vist dit baggrundsbillede som fliser afhængigt af dets størrelse. For at forhindre, at dette sker, skal du bruge no-repeat:

background-repeat: no-repeat;

For at holde tingene smukke holder vi vores image altid centreret:

background-position: center center;

Dette vil centrere billedet både vandret og lodret hele tiden.

Vi har nu produceret et fuldt responsivt billede, der altid dækker hele baggrunden:

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

Sådan rettes et billede på plads, når du ruller

Bare i tilfælde af at du vil tilføje tekst oven på baggrundsbilledet, og at teksten løber over den aktuelle visningsport, kan du muligvis sørge for, at dit billede forbliver i baggrunden, når brugeren ruller ned for at se resten af ​​teksten:

background-attachment: fixed;

Du kan medtage alle baggrundsegenskaber beskrevet ovenfor ved hjælp af en kort notation:

background: url(image.jpg) center center cover no-repeat fixed;

Valgfrit: Sådan tilføjes en medieforespørgsel til mobil

For at tilføje noget prikken over i'et, kan du tilføje en medieforespørgsel til mindre skærme:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

Du kan bruge Photoshop eller en anden billedredigeringssoftware til at mindske størrelsen på dit originale billede for at forbedre sideindlæsningshastigheden på mobile internetforbindelser.

Så nu hvor du kender magien ved at skabe en lydhør, baggrundsbillede af baggrundsbillede, er det tid til at oprette nogle smukke hjemmesider!

Vil du se flere tips og viden om webudvikling?

  • Abonner på mit ugentlige nyhedsbrev
  • Besøg min blog på 1000 Mile World
  • Følg mig på Twitter