Bild im paralaxx Element skalieren

03.12.2018 16:33
avatar  aggi
#1
ag

Guten Abend, ich habe ein Element auf meiner Webseite eingefügt, wo links einfach ein Blocktext und rechts ein Bild habe ( eingefügt in dem Code als url). Leider wird das Bild nach dem Einfügen des Urls ungünstig platziert, so dass die Ansicht nicht so ist, wie wir es wollen.

Wie kann ich die position des Bildes im / durch code verändern, so das nicht nur ein teil davon, aber die ganze vorschau in dem element angezeigt wird? bild verkleinern / vergrößern bringt nichts

danke agnieszka


 Antworten

 Beitrag melden
03.12.2018 16:40
avatar  Charles
#2
avatar

Dazu braucht man den Link.

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
04.12.2018 09:33
avatar  aggi
#3
ag

Da das Projekt noch nicht ganz fertig ist- anbei ein Screen wie das Element ausschaut. der Teil rechts hat ein paralaxx Effekt. Zusätzlich füge ich die Codierung ein, sowie das Bild, wie es eigentlich dargestellt werden sollte. Danke Euch. Agnieszka

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!-- tile parallax with left image -->
 
<div class="hs-fullwidth bg-section rel is-parallax" style="background: url('https://s2.imagebanana.com/file/181203/VWvbtV5k.jpg') no-repeat center">
<div class="hs-overlay dark-blue mobile-overlay" style="width:50%; opacity:1; left:0; right:width auto;">
</div>
 
<div class="inner rel color-white m-padding cc-clearover position: absolute; left: 0" style="padding:150px 0; padding-top:50px;padding-bottom:5px;">
<div class="hs-left-50 color-white">
<div class="gutter-10 clearover">
<div class="mobile-left">
<h1 style="position: absolute; left: 10; color:#ffffff;">
KIEZGÄRTNERN
</h1>
<br />
<br />
 
<p>
<br />
<br />
Ob Baumpflanzung mit den Kindern oder dem Schutz von Elefanten. Um unsere Umgebung ökologischer und nachhaltiger zu gestalten, unterstützen wir naturbezogene Initiativen im
jeweiligen Kiez und führen eigene Aktionen durch.
</p>
<br />
<br />
<br />
</div>
</div>
</div>
</div>
</div>
 


|addpics|n08-1-7d97.png,n08-2-8708.jpg|/addpics|


 Antworten

 Beitrag melden
04.12.2018 16:42
avatar  aggi
#4
ag

Es geht mir darum, die rechte Grafik aus dem Screenshot- das 'Lets do things' Bild gänzlich in dem paralaxx Element darzustellen , nicht nur einen Ausschnitt davon. Ich habe bereits versucht die Größe des Bildes zu ändern bzw seine Position in dem code zu ändern/definieren. Alles ohne Erfolg-der dargestellte Ausschnitt entspricht nicht dem ganzen, von mir ausgesuchten Bild, das ich auf der Webseite darstellen möchte. Ich bin mir halt nicht sicher, nach welchen Kriterien das gewählte Webseiten Baukastenelement die eingebetteten Fotos darstellt, wie es skaliert wird. Das Bild wurde durch eine url in den Elementcode eingefügt. Über Eure Ideen freue ich mich. Agnieszka


 Antworten

 Beitrag melden
04.12.2018 17:08
avatar  Charles
#5
avatar

Probier mal:

1
2
3
4
5
6
 
background-size: cover;
 
oder
 

background-size: contain;
 

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
04.12.2018 17:19
avatar  aggi
#6
ag

danke sehr, leider wird der linke teil des Bildes immer noch nicht korrekt dargestellt - dh. z.B. das Wort "things" wird links abgeschnitten. Anbei das Ursprungsbild- wie es aussehen sollte--|addpics|n08-2-8708.jpg-invaddpicsinvv|/addpics|


 Antworten

 Beitrag melden
04.12.2018 17:27
avatar  Charles
#7
avatar

Mit einem Link würde es einfacher gehen

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
04.12.2018 17:28
avatar  aggi
#8
ag

kann man es mit dem 'padding' class irgendwie verschieben, oder gibt es empfohlene/optimale bild größen die für so ein element vorgeschrieben sind? ich bin ziemlich ratlos, es muss doch irgendwie gänzlich darstellbar sein, oder aber ist es so bei den paralaxx Elementen, dass die Bilder nur ausschnittsweise angezeigt werden, und der ausschnitt an die Seite angepasst wird?
ich habe auf der Seite ein zweites paralaxx Element- 'fullwidth image with parallax effect and overlay' , da wird das ganze bild angezeigt.


 Antworten

 Beitrag melden
04.12.2018 17:33
avatar  Charles
#9
avatar

Zitat von aggi im Beitrag #8

ich habe auf der Seite ein zweites paralaxx Element- 'fullwidth image with parallax effect and overlay' , da wird das ganze bild angezeigt.

warum nimmste das dann nicht?

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
04.12.2018 17:35
avatar  aggi
#10
ag

ja ich weiß, leider ist das projekt noch nicht ganz 'öffentlich' daher habe ich absichtlich keinen link hinzugefügt- das element ist ähnlich zu dem hier dargestellten 'half fullwidth' nur rechts ist halt ein paralaxx bild hinzugefügt:

https://www.matrix-themes.com/support/custom-widgets/


 Antworten

 Beitrag melden
04.12.2018 17:37
avatar  aggi
#11
ag

weil wir verschiedene baukasten elemente auf der seite nutzen wollen, und auch verschiedene bilder halt. hmmm sollte eigentlich einfach sein, und sowas halt.... :-)


 Antworten

 Beitrag melden
04.12.2018 17:38
avatar  aggi
#12
ag

aber danke schon auf jeden fall für die ideen und hilfversuche :-)


 Antworten

 Beitrag melden
06.12.2018 12:48
avatar  az_
#13
avatar
az_

Du kannst Dich damit mal an den Matrix-Support wenden. Die können Dir bestimmt helfen. Tipp: das HG-Image ist viel zu groß, das solltest Du dringend verkleinern:




LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
06.12.2018 13:01
avatar  aggi
#14
ag

danke sehr für deine Antwort- ich versuche es, wobei die Hilfe kommt da immer ein wenig verhalten. naja. ich habe es bereits versucht zu verkleinern, es wurde dann in dem Element noch größer dargestellt/ man sah noch weniger von dem Bild.

VG Agnieszka


 Antworten

 Beitrag melden
06.12.2018 13:19
avatar  az_
#15
avatar
az_

ok, das ist logisch: die Einstellung ist für background-size ist "cover", dh. das Bild wird auf die Fenstergröße vergrößert. kleineres Bild = kleinerer Ausschnitt. Der Fall ist nicht einfach zu lösen. Vielleicht würde sich ein Bild mit 1/2 transparenter Fläche (links) per CSS korrekt positionieren. background-size müsste dann statt "cover" "100vw 50vw" sein...

...das hab ich aber noch nicht getestet.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!