Grafik im <DIV> positionieren

Fetnet · 13. Dezember 2018

Hallo Zusammen,

ich gestalte gerade einen Beitrag und möchte gerne eine Grafik darin frei setzten ohne das der Text beeinflusst wird.

Bsp:

Code

<div class="well">
<p> </p>
<p style="text-align: center;"><span style="font-family: impact, sans-serif; font-size: 18pt;">" Was müssen wir alles in Sachen Datenschutz unternehmen? "</span></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><span style="font-family: impact, sans-serif; font-size: 18pt;">" Wir benötigen einen Datenschutzbeauftragten mit Sachverstand und Augenmaß! "</span></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><span style="font-family: impact, sans-serif; font-size: 18pt;">" Die hohen Bußgelder schrecken uns ab.  "</span></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><span style="font-family: impact, sans-serif; font-size: 18pt;">" Das Datenschutzrecht ist kompliziert und überfordert uns! " <br /></span></p>
<p> </p>
</div>

Alles anzeigen

In der Grafik würde ich sagen das wir eine Ebene hinzufügen müssen, würde bedeuten ein <div> im <div>

oder kann man das auch anders lösen??

Vielen Dank im Voraus

Sven

kitepascal · 13. Dezember 2018

CSS background-image.

<div class="well fragezeichenmaennchen"> <-- Weitere Klasse ergänzen

.fragezeichenmaennchen {

background-image: url("../images/fragezeichenmaennchen.png");

background-position: left bottom;

background-repeat: no-repeat;

}

..oder so ähnlich.

Vorausgesetzt die CSS Datei, in der das untergebracht wird, liegt in templates/deintemplate/css und das Hintergrundbild in templates/deintemplate/images/fragezeichenmaennchen.png.

https://www.w3schools.com/cssref/pr_background-image.asp

kitepascal · 13. Dezember 2018

...oder direkt inline (Bild dann in /images, nicht in templates/deintemplate/images.)

Ich würde es aber über eine custom.css lösen, weil mit media queries besser steuerbar je nach Gerät (Desktop/mobil etc.)

Fetnet · 13. Dezember 2018

und da kommt meine nächste Frage gleich dazu: wie kann ich steuern, dass die Grafik mobil nicht angezeigt wird weil sie dann in den Text hineinragt?

Danke schon mal im Voraus

Sven

kitepascal · 13. Dezember 2018

Wie erwähnt über css media queries.

Z.B.

CSS

@media (max-width: 1024px) {
.fragezeichenmaennchen {
background-image: none !important;
}
}

chr-hl · 13. Dezember 2018

Moin,

schaue einmal unter dem Begriff "media-queries"

Damit kannst Du dann bei bestimmten Breiten, die Anzeige "ausschalten".

Christian

Fetnet · 13. Dezember 2018

ok hab ich gemacht, dachte so sollte es gehen, aber ...

CSS

.sm1{

background-image: url("../images/clipart/strichm_q1.png");

background-position: left bottom;

background-repeat: no-repeat;

}

@media only screen and (max-width: 1024px) {

.sm1 {

background-image: none !important;

Alles anzeigen

nix wars! raus kam das hier

chr-hl · 14. Dezember 2018

Bescheide Frage: Wo hast Du das hingeschrieben?

Kannst Du Deine Seite nicht online stellen, damit man das vernünftig analysieren kann?

Christian

Tags