Background Image in VCMS responsive machen

Deutsches Forum
1

Ich möchte in Widgets das Design so anpassen das die Background Bilder responsive aggieren. Momentan ist das so das beim kleiner werden der Seite die Bilder nach rechts hin aus dem Rahmen heraus laufen. Sie passen sich nicht mit dem Widget Fenster an.
Die Lösung sollte schon selektive, da es sonst auf anderen Seiten andere Probleme passieren könnten.
Gibt es im Admin Tool eine Weg wie man es einstellen kann?

2

Hallo SuperSAM

Das Verhalten eines Hintergrundbildes lässt sich rein mit CSS festlegen, hier ein Beispiel.
Speichere das Snippet in ein HTML Dokument und setz ein beliebiges Bild im gleichen Ordner an die Stelle “<hier Bild einfügen>” ein, dann öffne die Datei im Browser und vergrößere/verkleinere es…

<html>
<head>
<style>
.bckimg {
	background-image: url("<hier Bild einfügen>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
}
.dyn-height {
	height: 100%;
	min-height: 50px;
}
.dyn-width {
	width: 100%;
	min-width: 50px;
}
</style>
</head>
<body>
	<div class="bckimg dyn-width dyn-height ">
	</div>
</body>
</html>

Es hängt alles vom Verhalten des Containers ab - solange dieser sich nicht verändert, ändert sich auch das Hintergrundbild nicht.

Ich hoffe, du kannst es gebrauchen :slight_smile:

Viele Grüße

3

Hallo HonkDerHase,

danke für die Antwort, die Höhe der Box ist bis zur Tablet ansicht fix.
Durch ändern der Höhe sollte sich das Problem lösen.

VG