18. Februar 2023

Bild mit 100% Breite im Bootstrap-Container

Jeder, der mit Bootstrap arbeitet stand bestimmt schon mal vor diesem Problem: Die Breite der Inhalte ist durch den Bootstrap-Container begrenzt, jetzt soll aber ein Bild über die ganze Breite des Bildschirms laufen.

Das naheliegende „width: 100%“ bezieht sich auf die Breite des Containers und funktioniert somit natürlich nicht. Und wenn der Image-Container absolut positioniert wird, kann er die darunter liegenden Inhalte nicht mehr verdrängen.

Der „Trick“ hierbei ist für die Breitenangabe „100vw“ (Viewport Width) zu benutzen und den Container erst 50% nach rechts zu verschieben und anschließend wieder mit negativem „margin-left“ nach links zu ziehen.

.bgimg100{
    height: 40vh;
    background-size: cover;
    background-position:center;
    margin:20px 0 30px 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}Code-Sprache: CSS (css)

Hier gibt´s die Demo: www.fbnfrtg.de/demo/box100.html

Das ganze lässt sich auch im Gutenberg-Editor nutzen. Entweder die Angabe der Klasse über die erweiterten Block-Settings rechts, oder – noch eleganter – über einen dafür gebauten LazyBlock.