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

[ERLEDIGT] Hintergrundbild im DIV Container

Hayolike

Neues Mitglied
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:
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.
 
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:
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
 
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.
 
Werbung:
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?
 
Kommt darauf an.
Ist das deine ganze CSS, oder hast du noch mehr CSS die du uns nicht gepostet hast?
Zb hier
*** Link entfernt, weil Seite nicht mehr erreichbar ***
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.
 
Zuletzt bearbeitet:
Gib zum Test mal bei height statt 75% bitte 600px ein und schau, ob das Bild dann angezeigt wird.
 
Werbung:
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;
   }
 
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
 
Werbung:
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?
 
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: 3
Werbung:
War wohl ein Missverständnis. =)

HTML:
<!Doctype html>
<html lang="de" dir="ltr">
<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="stylesheet.css">
</head>
<header>
  <div class="header">
  <a href="index.html" id="Logolink"><img src="LogoFull.png" alt="Logo"></a>
  <div class="header-right">
      <a href="Beschreibung.html" id="Beschreibung">About Us</a>
      <a href="Dienstleistung.html" id="Dienstleistung">Dienstleistung</a>
      <a href="Kontakt.html" id="Kontakt">Kontakt</a>
   </div>
</header>
<body>
 
<div id="Hintergrundbild01">
      <h1 class="image-heading">Tekki aus Leidenschaft</h1>
</div>
<div id="Infobox">
     <h1>TEST TEXT</h1>
</div>
</body>
</html>

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, #Dienstleistung, #Kontakt {
  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;
}

/* Style the Login Button */
#Login {
  font-family: 'Great Vibes', cursive;
  display: block;
  border: none;
  width: 100px;
  color: white;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
}

/* Die Startseite, das erste Bild */
#Hintergrundbild01{
  background-image: url(Bilder/Hintergrund001.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 90vh;
}

/* 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);
}

/* Infobox mit drei Tabellen */
#Infobox {
  background-color: whitesmoke;
}

/* Body Grundeinstellung */
body {
  background-color: black;
}

/* Change the background color on mouse-over */
#Logolink:hover{
  cursor: grab;
}
#Beschreibung:hover {
  background-color: rgba(138, 1, 1, 0.4);
  color: rgba(255, 255, 255, 0.542);
}
#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);
}

/* Float the link section to the right */
.header-right {
  float: right;
}
 
Danke, hab mein Code angepasst.

Ich habe noch folgende Frage: Du schriebst, dass da noch Text hinzu kommen soll. Wird der so umfangreich, dass Scrollen notwendig ist oder soll diese Startseite einfach nur das Browserfenster ausfüllen ohne Scrollbar?

Das weiß ich ehrlich gesagt noch nicht. Aber es soll eigentlich nicht mit dem Hintergrund verbunden sein.

/* Damit außen kein Rand entsteht, setzen wir das Margin
(Außenabstand) auf Null: */
Code:
body {
    margin: 0;
    background-image: url(dein-hintergrundbild.jpg);
    background-size: cover;
}

wenn ich das Bild dem Body zuweise, kann ich gar kein Text unter dem Bild erstellen oder?
 
Dein Bild in Posting #19 hatte ich so verstanden, dass das Bild unter bzw. hinter der ganzen Seite liegen soll? Soll der Text jetzt nicht vom Bild hinterlegt werden?
Das Bild soll hinter dem Slogan sein und hinter dem Header aber unter dem Bild soll noch ein "Bereich" kommen, dessen Hintergrund einfach weiß ist mit einem Text. Ungefähr wie im angehängten Bild, nur dass der Header durchsichtig sein soll (wie er jetzt ist), das Bild etwas weiter nach unten gehen soll und die Schrift auf dem Bild "WORKFLOW OPTIMIZATION BY AYUDARE" soll in dem jetzigen Style sein. Im Grunde genommen ist der Header und der Slogan fertig. Es fehlt nur noch das Bild, der Text darunter und der Footer.
 

Anhänge

  • rsz_test_bild.png
    rsz_test_bild.png
    998,4 KB · Aufrufe: 5
Werbung:
Hab ich gemacht und dadurch ist das Bild im Headerbereich gelandet. Selbst, wenn ich es in meine H1 Überschrift in meinen Header packe, ist das Bild nur als Hintergrundbild von der Überschrift.

Aber es hat nun geklappt, ich weiß zwar nicht genau wo mein Fehler war, aber nach dem ich mein Body nochmal neu gestylte habe (hatte es aus versehen rauskopiert) ist der Fehler verschwunden.
 
Zurück
Oben