Hallo Homepage-Baukasten-Community,
seit Tagen probiere ich jetzt ein Background-Image - ( Hintergrund-Bild ) in voller Höhe 100% darzustellen, aber es funktioniert nicht, obwohl ich ein height 100% angegeben habe.
Das Problem: der Hintergrund passt sich nur dem Text-Inhalt an, und da muss doch ein Fehler sein 
Ich habe auch schon telefonischen Kontakt mit einer freundlichen Dame vom Homepage-Baukasten gehabt, und habe Ihr das Problem geschildert, sie meinte das man ein angeben soll, was jedoch nicht bei allen Browsern funktioniert.
Weiteres Problem habe ich dann, wenn ich dem Background-Image eine feste Pixelangabe in der Höhe vergebe, dann wird bei kleineren Engeräten wie zum Beispiel Smartphone, der Inhalt darunter, also alles nach dem Hintergrund-Bild, ein paar Pixel weiter unten angezeigt statt gleich nach dem Hintergrund-Bild, was ja auch selbstverständlich ist, weil das Bild eine feste Höhe hat.
Bei großen Bildschirmen ist alles was darunter angezeigt wird dann wieder so wie es sein soll, jedoch schneidet sich das Bild dementsprechend ab beziehungsweise es wird nicht in voller Höhe angezeigt, was mich natürlich dann sehr verärgert.
Ich habe auch schon gegoogelt, dennoch finde ich keinen Sinnlichen Rat, und frage deshalb hier mal im Forum, ob mir jemand weiter helfen kann?...
Nun meine Frage, wieso wird der Hintergrund nicht auf 100% in der Höhe angezeigt, obwohl im Code angegeben ist.
Zum Testen habe ich einen anderen Standart-Editor benutzt, mit den gleichen CSS und Html Angaben, und auch hier funktioniert es prima, dass das Hintergrund-Bild immer zu hundert Prozent in der Höhe angezeigt wird, trotz weniger Text-Inhalte.
Kann mir jemand weiter helfen, damit für dieses Problem eine vernünftige Lösung gefunden werden kann, was eventuell jedem anderen, wo das gleiche Problem hat, weiter hilft.
Hier mal der ganze Code vom Background-Image:
Code: <style type="text/css">
.div_background_image {
width: 100%;
height: 100%;
background-image: url(https://img.webme.com/pic/m/myheimseite/110.jpg);
background-size: 100% auto;
background-repeat: no-repeat; }
p {
margin: 0px;
padding: 0px; }
</style>
<div class=" div_background_image">Hier ein langer Text einfügen.</div>
<p>Text darunter</p>
Hier eine Testseite zum Problem: http://MyHeimseite.de.tl/background_image2.htm
Ich freue mich über jede Hilfe!.
Mit freundlichen Grüßen, Patrick Schmidt 
Zuletzt bearbeitet von MyHeimseite am 05.09.2017, 23:50, insgesamt 5-mal bearbeitet
|
