Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Hallo,
ich benutze Wordpress mit dem Impreza Theme und wollte fragen, ob es mit CSS möglich ist, das Hintergrundbild einer Zeile anzusprechen. Ich bin absoluter neuling in sachen Wordpress und würde mich sehr über eure Hilfe freuen.:D
Freue mich auf Antworten
MfG
Lukas
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
... und wir würden uns freuen, wenn wir ein paar mehr Informationen zu deinem Problem hätte! ... Link zur Seite... welches Bild... welche Zeile ... was willst du ändern?
Entschuldigung, für die spärlichen Informationen. Ich habe eine Zeile mit Hintergrundbild und darüberliegendem Text, nun möchte ich das, wenn man mit dem Mauszeiger über das Bild fährt, das Bild etwas hineingezoomt wird.
Hier ist der HTML Code von dem Teil meiner Website:
<div class="l-section-h i-cf"><div class="g-cols vc_row type_default valign_middle"><div class="vc_col-sm-12 wpb_column vc_column_container"><div class="vc_column-inner"><div class="wpb_wrapper">
<div class="wpb_text_column vc_custom_1519231530364 picture-shadow">
<div class="wpb_wrapper">
<h2 style="text-align: left;"><strong>Tätigkeitsbereiche</strong></h2>
</div>
</div>
<div class="g-cols wpb_row type_default valign_middle vc_inner picture-shadow vc_custom_1519236504257"><div class="vc_col-sm-6 wpb_column vc_column_container"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="vc_empty_space" style="height: 50px"><span class="vc_empty_space_inner"></span></div>
<div class="wpb_text_column vc_custom_1519231483102">
<div class="wpb_wrapper">
<h2><strong>BRANDSCHUTZ</strong></h2>
<h4>?<br>
?<br>
?<br>
?<br>
?<br>
?</h4>
<div class="w-btn-wrapper align_left"><a class="w-btn style_solid color_primary icon_none"><span class="w-btn-label">Mehr erfahren</span></a></div>
</div>
</div>
<div class="vc_empty_space" style="height: 50px"><span class="vc_empty_space_inner"></span></div>
</div></div></div><div class="vc_col-sm-6 wpb_column vc_column_container"><div class="vc_column-inner"><div class="wpb_wrapper"></div></div></div></div></div></div></div></div></div>
Ich kenne mich wie gesagt nicht sehr gut mit HTML aus, jedoch bitte ich um Eure Hilfe!
Ich freue mich über Antworten.
Gruß Lukas
Tja... damit kann man wenig bis gar nichts anfangen :(! Da ist kein Bild - und wenn da ein ist dann ist es ein Hintergrund irgendeines der diversen div's, die du da eingebaut hast.
Es fehlt das zugehörige CSS!
Gib und den Link zur Seite, dann wird die Sache sicherlich schnell zu beantworten sein, aber so kann ich nur sagen.. identifiziere das Element, dass die beeinflussen willst und nutze :hover, um den gewünschten Effekt an diesem Element zu erzielen.
Ich habe schon probiert, das Bild irgendwie anzusprechen, jedoch leider erfolglos. Wie man hinterher mit CSS die Animation einfügt, ist mir bekannt.
Der Link zur Seite: https://moeller-bsp.de
Ich freue mich über Antworten.
MfG
Lukas
Wie vermutet handelt es sich um Hintergrundbilder, die mittels CSS durch 'background-image: url(https://.....)' eingefügt werden.
Die Einfügung - auf deiner Startseite - erfolgt zu den Klassen (<div class="....">)
.vc_custom_1519236504257, .vc_custom_1519231493915, .vc_custom_1519231509991
Um hier das Verhalten des Hintergrundbides beim 'hover' zu verändern, könntest du zB folgendes in dein zusätzliches CSS schreiben (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)
.vc_custom_1519236504257:hover,
.vc_custom_1519231493915:hover,
.vc_custom_1519231509991:hover {
background-size: 110% !important; [COLOR=#ff0000]/*oder was auch immer deinen Vorstellungen entspricht*/[/COLOR]
}
Und falls du unsicher bist, wie das gemacht wird, hier ein kleines Video!
https://www.youtube.com/watch?v=KJpZT5IkOpc
Achso okay, ich bin bis jetzt immer nur von dem HTML Code ausgegangen, an den eigentlichen CSS Code habe ich gar nicht gedacht.
Vielen Dank schonmal, ich werde das ganze Heute Abend mal ausprobieren und dann nochmal Berichten.
Gruß Lukas
So, ich habe gerade mal ausprobiert das Hintergrundbild über den vc_custom code zu erreichen und siehe da es Funktioniert, Super!!!
Ich habe jetzt mit dem transform: scale(X) Befehl gearbeitet und dieser Funktioniert auch einwandfrei, jedoch hätte ich gerne das dass Bild seine eigentliche Größe behält und nur Hineingezoomt wird. Ist das irgendwie möglich?
Gruß Lukas
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!