Numera efterfrågas webbplatser med responsiva bakgrundsbilder. Responsiva webbplatser ger användarna en idealisk användarupplevelse på nästan alla enheter inklusive mobiler, surfplattor eller stationära datorer. Responsiva bilder kan anpassa webbplatsens bakgrund, skärmstorlek och dimensioner. Responsiva bilder säkerställer att kvaliteten och proportionerna bibehålls. Dessutom laddas webbplatsen med responsiva bakgrundsbilder snabbt.
Den här guiden ger instruktioner för att anpassa bakgrundsbilderna till skärmdimensioner.
Hur anpassar man bakgrundsbilder till skärmdimensioner?
Bilden kan anpassas till skärmens mått genom att gå igenom de stegvisa instruktionerna nedan.
Steg 1: Skapa en HTML-struktur
Skapa först en HTML-struktur och lägg till den externa stilmallen med hjälp av
< html >
< huvud >
< länk rel = 'stilmall' href = 'style.css' >
< titel > Responsiv bakgrundsbild titel >
huvud >
< kropp >
-- Område för att lägga till annat innehåll-- >
kropp >
html >
Steg 2: Använd CSS
Applicera nu CSS på ' kropp ' sektion. Ange först bakgrundsbilden. För detta ändamål, använd ' bakgrundsbild ' och ange ' url() ”-värde som innehåller bildfilens adress.
Efter det använder du ' bakgrundsbild ' för att ange bildstorleken, ' bakgrund-upprepa '-egenskapen för att ställa in upprepningen av bilden, och ' bakgrundsbilaga ” för att ställa in om bilden ska rullas med resten av sidan eller inte. Ställ slutligen in ' marginal ' och ' stoppning ' till ' 0 ”:
kropp {bakgrundsbild: url ( 'test-image.jpg' ) ;
bakgrundsstorlek: 100 % 100 % ;
/* Skala bilden till 100 % bredd och 100 % höjd */
bakgrundsupprepning: ingen upprepning;
bakgrundsbilaga: fixerad;
marginal: 0 ;
stoppning: 0 ;
/* Valfritt: Fast bakgrund */
}
Produktion
Det här är resultatet innan webbläsarfönstret sammandras:
Efter sammandragning av webbläsaren:
Ovanstående utdata bekräftar att bilden har anpassat bakgrunden till skärmens mått.
Slutsats
För att anpassa bakgrundsbilder till skärmdimensioner, inkludera först ' utsiktsplats ” i huvudsektionen för att styra dimensioner och skalning. Skapa sedan en HTML-struktur och tillämpa CSS. I CSS, ställ in ' bakgrundsstorlek ' egenskapsvärde till ' omslag ”-värde för att skala en bilds höjd och bredd. Den här artikeln har presenterat en komplett guide för att anpassa bakgrundsbilder till skärmdimensioner.