CSS background-size: cover forklaret

Forstå CSS `background-size`: `cover` og `contain`

I moderne webdesign er det essentielt at have billeder, der ser godt ud på tværs af alle skærmstørrelser. CSS's `background-size` egenskab er et kraftfuldt værktøj til at opnå netop dette. Den giver dig kontrol over, hvordan et baggrundsbillede skaleres inden for dets container. Specielt værdierne cover og contain er centrale for at skabe responsive og æstetisk tiltalende layouts. Lad os dykke ned i, hvad disse værdier betyder, og hvordan du kan bruge dem effektivt.

Hvad betyder `background-size: cover;`?

Når du sætter background-size: cover;, instruerer du browseren om at skalere billedet, så det fylder hele containeren, både i bredden og højden. Hvis billedets proportioner ikke matcher containerens, vil billedet blive beskåret for at sikre, at ingen dele af containeren forbliver tomme. Dette er ofte den foretrukne metode, når du vil have et billedtæppe, der dækker et helt område uden synlige mellemrum, for eksempel på en forside eller som baggrund for en sektion.

Fordelen ved cover er, at det altid sikrer en fuld dækning, hvilket kan give et meget dramatisk og indlevende udtryk. Ulempen kan være, at vigtige dele af billedet kan blive beskåret, afhængigt af billedets og containerens proportioner.

Hvad betyder `background-size: contain;`?

I modsætning til cover, sikrer background-size: contain;, at hele billedet altid er synligt inden for containeren. Browseren skalerer billedet, så det passer ind, mens dets oprindelige proportioner bevares. Hvis billedets proportioner ikke matcher containerens, vil der opstå tomme områder enten i siderne eller i toppen og bunden af containeren. Disse tomme områder vil så blive fyldt med den farve, der er defineret af background-color egenskaben.

contain er ideelt, når billedets integritet er vigtig, og du ikke ønsker, at dele af det skal gå tabt. Det kan bruges til logoer, illustrationer eller billeder, hvor alle detaljer skal være synlige.

Hvornår skal man bruge `cover` vs. `contain`?

Valget mellem cover og contain afhænger af det ønskede visuelle resultat og billedets indhold:

• Brug cover:
  • Når du ønsker et fulddækkende baggrundsbillede, der skaber en stemning eller atmosfære.
  • Når billedets specifikke indhold ikke er kritisk, og beskæring er acceptabel.
  • Til hero-sektioner, fuldskærmsbaggrunde eller baggrunde hvor fokus er på tekst eller andre elementer ovenpå billedet.
• Brug contain:
  • Når alle dele af billedet skal være synlige.
  • Når billedets proportioner er vigtige at bevare, f.eks. ved præsentation af produkter eller illustrationer.
  • Når du har en fastsat baggrundsfarve, der skal fungere som supplement til billedet.

Andre værdier for `background-size`

Udover cover og contain understøtter background-size også andre måder at definere størrelsen på:

• Specifikke dimensioner: Du kan angive en præcis bredde og højde i pixels (px), em, rem eller andre længdeenheder. F.eks. background-size: 300px 200px;.
• Procentvise dimensioner: Du kan angive størrelsen som en procentdel af containerens bredde og højde. F.eks. background-size: 50% 50%; vil skalere billedet til halvdelen af containerens bredde og højde.
• Automatisk (auto): Værdien auto lader browseren bestemme billedets størrelse. Hvis kun én værdi er angivet (f.eks. background-size: 100px;), sættes bredden til 100px, og højden justeres automatisk for at bevare proportionerne. Hvis begge værdier er auto (background-size: auto auto;), bruges billedets originale dimensioner.

Brug af `background-size` med flere baggrunde

CSS tillader dig at have flere baggrundsbilleder lagt oven på hinanden. I sådanne tilfælde skal du angive en background-size værdi for hvert billede, adskilt af kommaer. Rækkefølgen af værdierne svarer til rækkefølgen af baggrundsbillederne (det første billede er øverst).

Eksempel:

background-image: url('billede1.jpg'), url('billede2.png'); background-size: cover, contain; 

Her vil billede1.jpg dække hele containeren (cover), mens billede2.png vil blive skaleret, så det er fuldt synligt inden for den plads, det har til rådighed.

Hvordan laver man et cover baggrundsbillede til mobil?

At sikre, at dit baggrundsbillede ser godt ud på mobile enheder, er afgørende. Ofte kan et billede, der fungerer godt på en stor skærm, blive beskåret uheldigt på en lille mobilskærm, især med background-size: cover;.

Her er en metode til at optimere dette ved hjælp af brugerdefineret CSS:

1. Identificer din container: Find den HTML-element, som baggrundsbilledet er tilknyttet.
2. Åbn Custom CSS Editor: Gå til din sides eller projekts branding-indstillinger og åbn den brugerdefinerede CSS-editor.
3. Indsæt CSS-kode: Du kan bruge følgende CSS-kode. Sørg for at erstatte 'din-billed-sti.jpg' med den faktiske URL til dit baggrundsbillede, og #din-container-id med den korrekte CSS-vælger (f.eks. et ID eller en klasse) for din container.

/* For større skærme (desktop) */ #din-container-id { background-image: url('din-billed-sti.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* For mindre skærme (mobil) - Juster dette efter behov */ @media (max-width: 768px) { /* Du kan justere 768px til en anden breakpoint */ #din-container-id { /* Du kan vælge at bruge et andet billede til mobiler */ /* background-image: url('din-mobil-billed-sti.jpg'); */ /* Eller justere positionen for at vise en bestemt del af billedet */ background-position: top center; /* Prøv 'bottom center', 'center left' osv. */ /* Du kan også overveje at ændre størrelsen, hvis 'cover' ikke fungerer godt */ /* background-size: contain; */ } } 

Forklaring:

• background-position: center center;: Placerer billedet centreret horisontalt og vertikalt.
• @media (max-width: 768px): Dette er en media query, der anvender stilen kun på skærme, der er 768 pixels brede eller smallere.
• Inden i media queryen kan du justere background-position for at fremhæve en bestemt del af billedet på mindre skærme. Nogle gange er det nødvendigt at bruge et specifikt billede designet til mobile enheder for at opnå det bedste resultat.

Hvordan fylder man et område, der ikke er dækket af et baggrundsbillede?

Når du bruger background-size: contain;, eller hvis dit billede har gennemsigtige områder, kan der opstå tomme pladser. Disse pladser bliver automatisk fyldt med den farve, der er defineret af background-color egenskaben for det samme element.

Det er derfor en god idé altid at definere en background-color, der passer til dit billede eller dit overordnede design. Dette sikrer en pænere overgang og en mere poleret brugeroplevelse, især hvis billedet af en eller anden grund ikke indlæses.

.min-container { background-image: url('mit-billede.png'); /* Antag at billedet har gennemsigtighed */ background-size: contain; background-color: #f0f0f0; /* En lys grå baggrundsfarve */ width: 100%; height: 300px; } 

Tabel: Sammenligning af `cover` og `contain`

Fejlfinding med `background-size`

Her er nogle almindelige problemer og løsninger, når du arbejder med background-size:

• Billedet vises ikke:
  • Kontroller, at billedets URL er korrekt angivet.
  • Sørg for, at det element, du anvender baggrunden på, har definerede dimensioner (bredde og højde). Et element uden dimensioner vil ikke vise baggrunden.
  • Tjek for stavefejl i CSS-egenskaben eller værdien.
• Billedet er for lille/stort:
  • Prøv at skifte mellem cover og contain for at se, hvad der passer bedst.
  • Brug specifikke dimensioner eller procenter for finjustering.
  • Overvej at bruge background-position til at styre, hvilken del af billedet der er mest synlig.
• Billedet gentages uønsket:
  • Tilføj background-repeat: no-repeat; for at forhindre gentagelse.
• Uønsket beskæring på mobil:
  • Brug media queries til at justere background-position eller endda background-size for mobile enheder.
  • Overvej at uploade en separat, optimeret version af billedet til mobile enheder.

Konklusion

background-size med værdierne cover og contain er uundværlige værktøjer for enhver frontend-udvikler. Ved at forstå forskellen og anvende dem korrekt kan du skabe visuelt imponerende og responsive designs, der fungerer optimalt på alle enheder. Husk altid at teste dine designs på forskellige skærmstørrelser og enheder for at sikre det bedst mulige resultat. Ved at kombinere background-size med background-position og background-color kan du opnå fuld kontrol over dine baggrundsbilleder.

Ofte Stillede Spørgsmål (FAQ)

Q: Hvad er forskellen på `cover` og `contain`?

A: cover skalerer billedet, så det dækker hele containeren, men kan beskære billedet. contain skalerer billedet, så hele billedet er synligt, men kan efterlade tomme områder.

Q: Kan jeg bruge `background-size` til at sætte et specifikt mål for billedet?

A: Ja, du kan angive specifikke dimensioner i pixels (px) eller procenter (%). F.eks. background-size: 400px 300px;.

Q: Hvordan sikrer jeg, at mit baggrundsbillede ikke bliver beskåret på mobil?

A: Brug background-size: contain; eller brug media queries til at justere background-position, når du bruger cover, for at styre, hvilken del af billedet der vises.

Q: Hvad sker der, hvis billedet ikke fylder hele containeren med `contain`?

A: De tomme områder vil blive fyldt med den farve, der er angivet i background-color egenskaben for det pågældende element.

Q: Hvordan anvender jeg `background-size` på et element med et ID kaldet 'header'?

A: Du ville skrive det som følger i din CSS: #header { background-size: cover; }.

Hvis du vil læse andre artikler, der ligner CSS background-size: cover forklaret, kan du besøge kategorien Teknologi.