Baggrundsbilleder i Bootstrap 5: En Dybdegående Guide

06/02/2026

★★★★★Rating: 4.72 (1428 votes)

Indholdsfortegnelse

Tilføj Baggrundsbilleder med Bootstrap 5: Omdan Dit Webdesign

Tilføj Baggrundsbilleder med Bootstrap 5: Omdan Dit Webdesign

Bootstrap 5 er et af de mest populære frameworks til CSS-styling, der giver udviklere mulighed for at skabe flotte og responsive webdesigns hurtigt og effektivt. En af de mest effektive måder at forbedre det visuelle udtryk på en hjemmeside er ved at bruge baggrundsbilleder. I denne guide vil vi dykke ned i forskellige metoder til at implementere baggrundsbilleder i Bootstrap 5, lige fra de grundlæggende utility classes til mere avancerede teknikker som masker og gradienter.

How to make a full page background image in mdbootstrap? — Fortunately, there is a class in MDBootstrap that fixes this issue. Just add .bg-image to the class and you will see the problem magically disappear. Now we can easily make this background image to cover the full available space and make it a full-page background image. Just replace height: 400px; with height: 100vh;

Brug af BG Utility Class

Den mest direkte metode til at tilføje et baggrundsbillede i Bootstrap 5 er ved at bruge den indbyggede bg utility class. Denne klasse giver dig mulighed for at sætte et baggrundsbillede og yderligere styre dets størrelse og placering med inline styles. Dette er en hurtig og nem løsning, der er ideel til enkle implementeringer.

Syntaks:

<div class="bg" style="background-image: url('img');"></div>

Her er et eksempel på, hvordan du kan bruge bg utility class til at sætte et baggrundsbillede:

<!DOCTYPE html> <html> <head> <!-- Bootstrap CSS CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body class="bg-primary"> <div class="container-fluid h-100"> <div class="row h-100"> <div class="col-12"> <div class="bg" style="background-image: url('https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'); background-size: cover; background-position: center; height: 100vh;"> <div class="d-flex flex-column justify-content-center align-items-center h-100 text-center text-white"> <h1 class="display-2" style="font-weight: bold; color:black;">GeeksforGeeks</h1> <h2 class="display-6" style="font-weight: bold; color:red;"> <b>Using bg Utility Class</b> </h2> </div> </div> </div> </div> </div> <!-- Bootstrap JavaScript CDN --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

Denne metode er især nyttig, når du ønsker at anvende et baggrundsbillede på et specifikt element, såsom en div, og styre dets udseende præcist.

Brug af Card Utility Class

Bootstrap 5's Card komponent kan også bruges til at integrere baggrundsbilleder på en stilfuld måde. Ved at kombinere card-specifikke klasser med inline styles kan du skabe et card-lignende layout med et integreret baggrundsbillede. Dette giver en mere struktureret tilgang, især når du arbejder med indhold, der naturligt passer ind i et kortformat.

Syntaks:

<div class="card border-5 border-danger" style="background-image: url('img');"> <!-- Card indhold --> </div>

Her er et eksempel, der demonstrerer brugen af card utility class:

<!DOCTYPE html> <html> <head> <!-- Bootatrap CSS CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <title>Example 2</title> </head> <body> <div class="container"> <div class="card border-5 border-danger" style="background-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png'); background-size: cover; background-position: center; height: 100vh;"> <div class="card-body"> <h1 class="card-title text-center" style="color: green;">GeeksforGeeks</h1> <h1 class="card-title text-center">Using Card Utility Class</h1> </div> </div> </div> <!-- Bootstrap JavaScript CDN --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

Denne tilgang er ideel til at skabe visuelt tiltalende kort med baggrundsbilleder, der kan bruges til f.eks. produktvisninger eller blogindlæg.

Full Page Baggrundsbilleder

At skabe et fuldskærms baggrundsbillede er en almindelig designpraksis. I Bootstrap 5 kan dette opnås ved at bruge height: 100vh; (viewport height) og sikre, at billedet dækker hele containeren. MD Bootstrap tilbyder en .bg-image klasse, der er designet til netop dette formål.

Grundlæggende eksempel:

For at opnå et fuldskærms baggrundsbillede skal du definere billedet via inline CSS og sætte højden til 100vh. Dette sikrer, at billedet strækker sig over hele den synlige del af skærmen.

<!-- Baggrundsbillede --> <div class="bg-image" style="background-image: url('https://mdbcdn.b-cdn.net/img/Photos/Others/images/76.webp'); height: 100vh;"></div> <!-- Baggrundsbillede -->

For at billedet skal dække hele den tilgængelige plads, er det vigtigt at bruge et billede med tilstrækkelig høj opløsning. Vær dog opmærksom på filstørrelsen, da store billeder kan påvirke indlæsningstiden negativt.

How to create a navbar template using bootstrap? — Add bootstrap CDN links to the html. Add the CSS section inside the element and then add script right after tag. 1. Simple responsive navbar This navbar template is made with bootstrap 5 which collapses to a menu hamburger button at md breakpoint. All links are aligned to the right.

Halv Side Baggrundsbilleder

Du kan også vælge at lade baggrundsbilledet dække halvdelen af siden eller en anden procentdel. Dette gøres ved at justere height værdien. For eksempel, height: 50vh; vil få billedet til at dække 50% af viewport-højden.

<!-- Baggrundsbillede --> <div class="bg-image" style="background-image: url('https://mdbcdn.b-cdn.net/img/Photos/Others/images/77.webp'); height: 50vh;"></div> <!-- Baggrundsbillede -->

Dette er en populær teknik, der ofte bruges på landingssider for at skabe en dynamisk og visuelt interessant brugeroplevelse.

Jumbotron med Baggrundsbillede

Selvom Bootstrap 5 ikke længere har en dedikeret Jumbotron-komponent, kan du nemt genskabe funktionaliteten ved at bruge eksisterende klasser. Ved at kombinere .bg-image med tekst- og skyggeklasser kan du skabe en iøjnefaldende Jumbotron med et baggrundsbillede.

<!-- Jumbotron --> <div class="bg-image p-5 text-center shadow-1-strong rounded mb-5 text-white" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/003.webp');" > <h1 class="mb-3 h2">Jumbotron</h1> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus praesentium labore accusamus sequi, voluptate debitis tenetur in deleniti possimus modi voluptatum neque maiores dolorem unde? Aut dolorum quod excepturi fugit. </p> </div> <!-- Jumbotron -->

Kort med Baggrundsbillede

På samme måde som med Jumbotrons kan du oprette kort med baggrundsbilleder. Ved at anvende .bg-image på et card-element og derefter placere card-indholdet indeni, kan du opnå et stilfuldt kortdesign.

<!-- Kort --> <div class="bg-image card shadow-1-strong" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/003.webp');" > <div class="card-body text-white"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#!" class="btn btn-outline-light" data-mdb-ripple-init>Button</a> </div> </div> <!-- Kort -->

Centrering af Indhold

En vigtig del af at arbejde med baggrundsbilleder er korrekt centrering af indholdet. Bootstrap 5's flexbox utilities gør dette nemt. Ved at tilføje klasserne .d-flex, .justify-content-center (horisontal centrering) og .align-items-center (vertikal centrering) til dit baggrundsbillede-wrapper, kan du nemt centrere dit indhold.

Her er et eksempel på centreret indhold:

<!-- Baggrundsbillede --> <div class="bg-image d-flex justify-content-center align-items-center" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/nature/015.webp'); height: 100vh;" > <h1 class="text-white">Page title</h1> </div> <!-- Baggrundsbillede -->

Brug af Masker

Ofte giver et baggrundsbillede alene ikke tilstrækkelig kontrast for det ovenliggende indhold. Her kommer masker ind i billedet. Masker kan bruges til at justere billedets synlighed og forbedre kontrasten, hvilket gør teksten lettere at læse. Dette opnås ved at tilføje et overlay med en bestemt farve og gennemsigtighed.

Hvordan det virker:

En .bg-image wrapper bruges til at positionere og centrere billedet. Inden i denne wrapper placeres et .mask element, som får sin farve og gennemsigtighed via inline CSS med rgba() farvekoder.

How to create a responsive grid in Bootstrap 5?

<!-- Baggrundsbillede --> <div class="bg-image" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/nature/012.webp'); height: 100vh;" > <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);"> <div class="d-flex justify-content-center align-items-center h-100"> <h1 class="text-white mb-0">Page title</h1> </div> </div> </div> <!-- Baggrundsbillede -->

Ved at ændre RGBA-værdierne kan du finjustere farven og gennemsigtigheden af masken for at opnå den ønskede effekt. Du kan også eksperimentere med forskellige farver for at matche dit design:

<!-- Baggrundsbillede --> <div class="bg-image" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/nature/012.webp'); height: 100vh;" > <div class="mask" style="background-color: rgba(178, 60, 253, 0.6);"> <div class="d-flex justify-content-center align-items-center h-100"> <h1 class="text-white mb-0">Page title</h1> </div> </div> </div> <!-- Baggrundsbillede -->

Gradienter

For at tilføje endnu mere visuel dybde kan du kombinere baggrundsbilleder med gradienter. Dette kan gøres ved at definere en gradient i CSS og anvende den på maske-elementet. MD Bootstrap tilbyder endda en gradient generator, der kan hjælpe med at skabe flotte gradienteffekter.

.gradient-custom { /* fallback for old browsers / background: #a18cd1; / Chrome 10-25, Safari 5.1-6 / background: -webkit-linear-gradient( 45deg, rgba(29, 236, 197, 0.6), rgba(91, 14, 214, 0.6) 100% ); / W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient( 45deg, rgba(29, 236, 197, 0.6), rgba(91, 14, 214, 0.6) 100% ); }

<!-- Baggrundsbillede --> <div class="bg-image" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/nature/011.webp'); height: 100vh;" > <div class="mask gradient-custom"> <div class="d-flex justify-content-center align-items-center h-100"> <h1 class="text-white mb-0">Page title</h1> </div> </div> </div> <!-- Baggrundsbillede -->

Instagram Filtre

For en unik æstetik kan du også anvende effekter, der ligner Instagram-filtre, på dine baggrundsbilleder. Dette kan opnås ved at bruge CSS's backdrop-filter og mix-blend-mode egenskaber. Igen tilbyder MD Bootstrap værktøjer til at generere disse effekter.

.mask-custom { backdrop-filter: contrast(140%) brightness(100%) saturate(100%) sepia(50%) hue-rotate(0deg) grayscale(0%) invert(0%) blur(0px); mix-blend-mode: lighten; background: rgba(161, 44, 199, 0.31); opacity: 1; }

<!-- Baggrundsbillede --> <div class="bg-image" style="background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/nature/018.webp'); height: 100vh;" > <div class="mask mask-custom"></div> </div> <!-- Baggrundsbillede -->

Responsivitet af Billeder

Når du arbejder med billeder i Bootstrap, er det afgørende at sikre, at de er responsive. Bootstrap 5's .img-fluid klasse sikrer, at billeder skalerer korrekt med deres forældre-elementer. Dette betyder, at billederne aldrig bliver større end deres container, hvilket forhindrer layoutproblemer på tværs af forskellige skærmstørrelser.

Sådan gør du:

Tilføj blot klassen .img-fluid til dit <img> tag:

<img src="..." class="img-fluid" alt="Responsive image">

Dette sætter automatisk max-width: 100%; og height: auto;, hvilket sikrer optimal visning på alle enheder.

Billedthumbnails

Bootstrap tilbyder også muligheden for at skabe billedthumbnails med en let afrundet kant. Brug klassen .img-thumbnail til dette formål:

<img src="..." alt="..." class="img-thumbnail">

Justering af Billeder

Du kan nemt justere billeder ved hjælp af Bootstrap's float-klasser (.float-left, .float-right) eller tekstjusteringsklasser. For at centrere blokbilleder kan du bruge margin-utility klassen .mx-auto.

Eksempler på justering:

<img src="..." class="rounded float-left" alt="..."> <img src="..." class="rounded float-right" alt="..."> <img src="..." class="rounded mx-auto d-block" alt="..."> <div class="text-center"> <img src="..." class="rounded" alt="..."> </div>

Picture Element

Hvis du bruger <picture> elementet til at specificere flere billedkilder, skal du huske at anvende Bootstrap's billedklasser (f.eks. .img-fluid) på selve <img> tagget og ikke på <picture> tagget.

Konklusion

Bootstrap 5 tilbyder en bred vifte af værktøjer og metoder til at tilføje og styre baggrundsbilleder. Uanset om du har brug for et simpelt baggrundsbillede på et element, et fuldskærms billede, eller mere komplekse effekter som masker og gradienter, giver Bootstrap dig fleksibiliteten til at opnå et professionelt og visuelt tiltalende resultat. Ved at mestre disse teknikker kan du forbedre brugeroplevelsen og gøre dine webprojekter mere engagerende.

Hvis du vil læse andre artikler, der ligner Baggrundsbilleder i Bootstrap 5: En Dybdegående Guide, kan du besøge kategorien Teknologi.