Frage Hintergrundbild im DIV Container

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hayolike

Neues Mitglied
26 April 2021
15
0
1
29
Moin, ich würde gerne bei meinem DIV Container ein Hintergrundbild reinstellen. Aber irgendwie wird das Bild nicht geladen.

HTML:
<body>
    <div id="Hintergrundbild01">
      <h1 class="image-heading">TEST TEXT</h1>
    </div>
</body>

CSS:
   #Hintergrundbild01{
      background-image: url(Bilder/Hintergrund001.jpg);
      width: 100%;
      height: 75%;
      top: 0;
   }
 
Werbung:

m.scatello

Senior HTML'ler
15 Februar 2017
1.533
183
63
Das sind zu wenig Informationen, so kann man dir nicht helfen, sondern nur raten.

Groß/Kleinschreibung richtig?
Liegt die CSS-Datei im gleichen Verzeichnis?

Ein Link zur Seite wäre gut.
 

Hayolike

Neues Mitglied
26 April 2021
15
0
1
29
Es gibt kein Link, da es eine lokale Datei ist.

Groß /Kleinschreibung ist richtig.
CSS Datei ist im selben Ordner. Die anderen CSS Codes für die H1 Tag o.ä. funktionieren. Also kein Verlinkungsproblem.

Was für Infos werden denn noch benötigt? Kann die dann hier reinstellen.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Bist Du schon mit den Entwicklerwerkzeugen deines Browsers vertraut? Rechtsklick in die Seite und "Element untersuchen" o. ä. Dann das Tab Console auswählen und nachsehen ob Fehlermeldungen zu sehen sind.
 
Werbung:

basti1012

Senior HTML'ler
26 November 2017
1.570
172
63
Minden
basti1012.de
Es könnte auch sein das der DIV Container so groß ist wie das h1 Element, zumindest sieht es nach der CSS auch so aus.
Man könnte dann das h1 Element ein background:transparent; geben, oder den div Container größer als das h1 Element machen. Dann sollte das Bild sichtbar sein, wenn meine Theorie zutrifft
 

Hayolike

Neues Mitglied
26 April 2021
15
0
1
29
Bist Du schon mit den Entwicklerwerkzeugen deines Browsers vertraut? Rechtsklick in die Seite und "Element untersuchen" o. ä. Dann das Tab Console auswählen und nachsehen ob Fehlermeldungen zu sehen sind.
Zeigt keinen Fehler an.


Im Grunde genommen, möchte ich ein Bild welche die ganze Bildschirmbreite übernimmt und unter dem Header ist. Über dem Bild soll eine Überschrift sein. Dachte, wenn ich das Bild in einem DIV Container packe, kann ich einfach eine H1 Überschrift drüberlegen.
 

Hayolike

Neues Mitglied
26 April 2021
15
0
1
29
Es könnte auch sein das der DIV Container so groß ist wie das h1 Element, zumindest sieht es nach der CSS auch so aus.
Man könnte dann das h1 Element ein background:transparent; geben, oder den div Container größer als das h1 Element machen. Dann sollte das Bild sichtbar sein, wenn meine Theorie zutrifft
Aber lege ich ich nicht mit "width: 100%;" die Breite aufs Maximum?
 
Werbung:
Werbung:

Hayolike

Neues Mitglied
26 April 2021
15
0
1
29
Kommt darauf an.
Ist das deine ganze CSS, oder hast du noch mehr CSS die du uns nicht gepostet hast?
Zb hier
siehst du auch kein Bild, obwohl es da ist.

Glaube jetzt nicht das es bei dir zutrifft (je nachdem was die Rest CSS macht), aber solche fälle gab es auch schon öfters.
ich hab in meiner CSS Datei viele Codes drin. Falls es hilft, habe ich mal die komplette Datei hier aufgeführt.

Nicht über die Englischen Kommentare wundern, einiges ist ausm Netz kopiert.
CSS:
/* Schriftarten */
h1 {
   font-family: 'Shippori Mincho', serif;
 }
 a {
   font-family: 'Shippori Mincho', serif;
 }
 p {
   font-family: 'Shippori Mincho', serif;
 }
 
 /* Style the header with a background and about the full width */
 .header {
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(255, 255, 255, 0));
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
 }
 /* Style the Logo im Header */
 .header img {
     height: 75px;
     margin-left: 50px;
 }
 /* Style the header links */
 #Beschreibung, #Forum, #Registrieren {
   float: left;
   color: rgb(255, 255, 255);
   text-shadow: whitesmoke;
   text-align: center;
   padding: 15px;
   text-decoration: none;
   font-size: 20px;
   line-height: 25px;
   border-radius: 4px;
 }

 /* Die Startseite, das erste Bild */
   #Hintergrundbild01{
      background-image: url(Bilder/Original/Hintergrund001.jpg);
      background-repeat: no-repeat;
      width: 100%;
      height: 90vh;
      margin: 0;
      padding: 0;
   }
 body {
     background-color: black;
 }
 /* Slogan in der Mitte des Bilder */
 .image-heading{
   position: absolute;
   color: rgba(0, 0, 0, 0.624);
   font-family: 'Great Vibes', cursive;
   font-size: 100px;
   text-shadow: 2px 2px rgba(255, 255, 255, 0.45);
 }
 /* Change the background color on mouse-over */
 #Logolink:hover{
   cursor: grab;
   }
 #Dienstleistung:hover {
     background-color: rgba(138, 1, 1, 0.4);
     color: rgba(255, 255, 255, 0.542);
   }
 #Kontakt:hover {
     background-color: rgba(138, 1, 1, 0.4);
     color: rgba(255, 255, 255, 0.542);
   }
 #Registrieren:hover {
     background-color: rgba(138, 1, 1, 0.4);
     color: rgba(255, 255, 255, 0.542);
   }
   /* Float the link section to the right */
   .header-right {
     float: right;
   }
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.607
238
63
Nun taucht das Bild auf, aber es ist vom Bild her zu groß. Er nimmt die Breite nicht und die Höhe kann ich nur mit "vh" anpassen.
Hintergrundbilder sind im HTML- / CSS-Kosmos nur schmückendes Beiwerk. Sie enthalten keinerlei Informationen.

Von daher haben sie im Browser bestimmte Verhaltensweisen.

Sie können sich zum Beispiel keinen Platz schaffen, sondern werden immer im umgebenden Container angezeigt. Wenn der nicht groß genug ist wird das Hintergrundbild nur teilweise angezeigt. In deinem Beispiel ist das div-Element nur so groß wie sein Inhalt, also die Überschrift. Von dem Hintergrundbild wird also nur der Teil gezeigt, der den Platz der Überschrift einnimmt.

Um mehr vom Hintergrundbild anzuzeigen musst du also die Überschrift oder das div-Element selbst vergrößern. Dafür sind Prozent-Angaben in der Regel aber nicht geeignet, da die nach den CSS-Regeln grade für Anfänger nicht nachvollziehbar reagieren.

Wie das Hintergrundbild im Container angezeigt wird kannst du dann mit CSS bestimmen. Siehe zum Beispiel

https://www.mediaevent.de/css/background-size.html
 

Hayolike

Neues Mitglied
26 April 2021
15
0
1
29
Sie können sich zum Beispiel keinen Platz schaffen, sondern werden immer im umgebenden Container angezeigt. Wenn der nicht groß genug ist wird das Hintergrundbild nur teilweise angezeigt. In deinem Beispiel ist das div-Element nur so groß wie sein Inhalt, also die Überschrift. Von dem Hintergrundbild wird also nur der Teil gezeigt, der den Platz der Überschrift einnimmt.

Um mehr vom Hintergrundbild anzuzeigen musst du also die Überschrift oder das div-Element selbst vergrößern. Dafür sind Prozent-Angaben in der Regel aber nicht geeignet, da die nach den CSS-Regeln grade für Anfänger nicht nachvollziehbar reagieren.
Hat nun geklappt, das Bild ist da, aber nun geht das Bild nicht über die komplette breite oder bis nach open.
ich hab schon versucht mit:
CSS:
top: 0;
left: 0;
margin: 0;
padding: 0;

aber keine Chance. Hat wer vllt ne Idee?
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Ja, das ist die eine Möglichkeit. Es hängt aber davon ab, was Du erreichen willst: Bei cover wird seitlich oder oben und unten etwa abgeschnitten. Bei contain bleibt dagegen oben und unten oder seitlich freier Raum. Meistens ist cover das gewünschte. Funktioniert es mit cover denn so, wie Du es dir vorstellst?
 
Werbung:

Hayolike

Neues Mitglied
26 April 2021
15
0
1
29
Ja, das ist die eine Möglichkeit. Es hängt aber davon ab, was Du erreichen willst: Bei cover wird seitlich oder oben und unten etwa abgeschnitten. Bei contain bleibt dagegen oben und unten oder seitlich freier Raum. Meistens ist cover das gewünschte. Funktioniert es mit cover denn so, wie Du es dir vorstellst?
Leider nicht.

Dadurch bleibt der Rand genauso wie bei contain. Im Grunde möchte ich eine Startseite mit dem Bild als Hintergrundbild, dann ein Slogan "Tekki aus Leidenschaft" und darunter kommt ein DIV Container mit einem Text und dann ein Footer.
 

Anhänge

  • rsz_test_bild.png
    rsz_test_bild.png
    130,4 KB · Aufrufe: 2

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Dann muss es am Umfeld liegen.
Im Grunde möchte ich eine Startseite mit dem Bild als Hintergrundbild, dann ein Slogan "Tekki aus Leidenschaft" und darunter kommt ein DIV Container mit einem Text und dann ein Footer.
Das ist ja überschaubar, poste doch Mal dein letztes HTML und CSS. Bisher hatte ich das so verstanden, dass das Hintergrundbild nur die Überschrift unterlegen soll.
 
Werbung: