”Zoomes” eller ”beskæres” dine baggrundsbilleder i Divi? Her er forklaringen

af | Divi, Webdesign, WordPress

Når jeg designer hjemmesider, støder jeg ofte på en udfordring med baggrundsbilleder, som jeg har svært ved at forklare mine kunder. I denne artikel vil jeg én gang for alle forklare så godt jeg kan, hvorfor baggrundsbilleder ofte kun kan vises som et udsnit, ”zoomes helt vildt ind på” eller ”bliver beskåret/cropped”.

Hvad er baggrundsbilleder i Divi?

Når du definerer et baggrundsbillede et Divi -modul (f.eks. Sektion, række, kolonne eller modul), forsøger Divi at tilpasse baggrundsbilledet til at dække hele elementet og beholde de oprindelige proportioner af valgte billede. Det er vigtigt at forstå, at baggrundsbillede ikke er et reelt element / indhold på dine sider i modsætning til billedmodulet eller andre billeder, du tilføjer som et reelt indhold (det kan være tekstmoduler, ”blurbs”, sliders, call to action-moduler mv. Baggrundsbilledet fungerer som dekoration på et element,  og baggrundsbilledet kan ikke ændre størrelsen på elementet, som det ligger i. Hvis elementet ændrer sin størrelse, ændres baggrunden i henhold til elementets størrelse.

Hvordan fungerer baggrundsbilleder i Divi?

Som standard placerer Divi baggrundsbillederne i modulernes midterposition og udvider eller reducerer billedet for at dække modulstørrelsen. For at undgå at klemme eller strække det originale billede ændres baggrundsbilledets billedimensioner ikke. Her er for eksempel det, der sker, når du forsøger at anvende 100 x 100 px (kvadratisk) baggrundsbillede på tekstmodulet med 100 x 150px størrelse (rektangulært liggende format): Derfor bliver Divi baggrundsbilledet

Billedet er fra Elegant Themes

Som du kan se, er højde-/breddedimensionerne på modulet anderledes end baggrundsbilledeformatet. Bredden på to elementer er den samme, men højden er forskellig, så billedet skal skaleres proportionalt for at beholde billedets billedformat. Alt, hvad der er uden for modulet, bliver skjult. Her er et andet eksempel. Lad os prøve at anvende et portrætorienteret baggrundsbillede på en sektion i liggende rektangulært format: Her vises, hvordan det er nødvendigt at zoome ind på et baggrundsbillede for at få det til at passe i elementet, det skal dække.

Billedet er fra Elegant Themes

Indstil placering af Divi-baggrundsbillede

Standardindstillingen for baggrundsbilledet kan justeres. Du kan vælge at placere baggrundsbilledet øverst til venstre eller nederst til højre. Her er alle de tilgængelige muligheder under baggrundsbilledindstillingerne: Sådan kan du indstille et baggrundsbillede i Divi

Billedet er fra Elegant Themes

Bemærk: Baggrundsparametrene er ikke tilgængelige, hvis du aktiverer Parallax-effekten. Baggrundsbilledet kan også se anderledes ud, når du ændrer størrelsen på din browsers vindue eller tjekker siden på forskellige skærmstørrelser, fordi alle Div -moduler understøtter responsiv tilstand og formatforholdet mellem modulerne ændres på forskellige skærme. For eksempel kan teksten på store skærme kun fulde en eller to linjer, men på mindre skærme vil den fylde flere linjer, og modulet vil være større. Det betyder, at baggrundsbilledet skaleres igen for at dække hele modulet. Jeg håber, at denne forklaring har hjulpet til en bedre forståelse af baggrundsbilleders “opførsel”.

De allerbedste hilsner

PS: Har du brug for en livline, kan du hyre mig til at hjælpe dig i mål med dit Divi-website. Læs mere på siden hjælp til Divi.

Kom med på nyhedsbrevet og modtag
Den ultimative hjemmesideguide

Nå dine hjemmeside-KPI'er/performance-mål i år

R

23 sider tætpakket med håndgribelige tips og værktøjer til den eksisterende hjemmeside og projekt ny-hjemmeside.

R

Sådan kvalitetssikrer du den eksisterende hjemmeside.

R

Ny hjemmeside - sådan gør du.

Ebog vist på en Ipad
Rikke Ekelund

Skribent

Artiklen her er skrevet af mig. Jeg hedder Rikke Ekelund, og det er primært mig, der skriver her på bloggen. Til dagligt arbejder jeg som freelance webdesigner med at bygge hjemmesider til mine kunder, som jeg også hjælper med drift og support.

0 kommentarer

Indsend en kommentar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

Læs også…

Husk at opdatere dine SEO-titler til det nye år

Husk at opdatere dine SEO-titler til det nye år

Det er vigtigt for din virksomhed at have gode og optimale SEO-titler (title tags/metatitel). Du kan øge dine chancer for at blive fundet online ved at sikre, at dine titler er opdateret og passer til det aktuelle år. Husk at tjekke dine titler og opdater dem...

Natteskræk – hvad er det, og hvordan du får det til at gå over?

Natteskræk – hvad er det, og hvordan du får det til at gå over?

Denne artikel falder uden for de gængse emner på denne blog. Jeg gør undtagelsen for at dele min metode til at guide et barn ud af et natteskræksanfald. Min egen søn led af natteskræk (night terror) fra 2 til 12 år. Det var voldsomt - altså voldsomme og hyppige anfald...