CSS Hintergrundbild wird nicht angezeigt?

Ich mache grade eine Website, bei der oben im Header ein Hintergrundbild hinter dem Text stehen soll. Habe also ein div erstellt, eine Klasse gegeben und eine Höhe festgelegt. Wenn ich eine Hintergrundfarbe dort haben will, klappt es einwandfrei. Aber wenn ich ein background-image dort haben möchte, wird es im Browser einfach nicht angezeigt. Der Pfad stimmt, hab ihn schon mehrfach kontrolliert.

Wenn ich auf "untersuchen" klicke im Browser, wird auch dort im Code angezeigt, dass an der Stelle ein Hintergrundbild ist. Aber es wird einfach nicht angezeigt. Keine Ahnung, woran es liegt. Kann mir bitte jemand helfen?

Bild zum Beitrag

4 Antworten

PeterP58

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

03.12.2020, 13:37

Vielleicht das Bild falsch benannt? Heißt es "hammer.jpg" oder vielleicht "Hammer.JPG"? o_O *ratet

Woher ich das weiß:Hobby – Programmierer, EDV, ... seit den 80er :)

NackterGerd

04.12.2020, 08:16

Deshalb nutzt man für Files /Pfade/ URL nur Kleinbuchstaben bei Websites

tanteerna68

03.12.2020, 13:26

gibt mal auch ein width mit an.

RakonDark

03.12.2020, 13:33

er müsste wenigstens das sehen was durch die inneren elemente an width erzeugt wird .

baobob

03.12.2020, 14:41

Bei mir funktioniert dein Code, das Bild wird angezeigt. Ich tippe wie PeterP58 auf einen Schreibfehler im Dateinamen oder einen falsch angegebenen Dateipfad.

Wenn du im Chrome Browser auf "Untersuchen" gehst, wird dann ein Fehler angezeigt ( am kleinen roten Kreis mit "X" zu sehen )?
Ich habe mal testweise die Bilddatei umbenannt, dann sieht es aus wie im folgenden Screenshot.

Bild zum Beitrag

RakonDark

03.12.2020, 13:21

kannst du das bild direkt im browser öffnen ? es gibt unterschiedliche JPEG formate , meist geht JPEG2000 nicht im browser .

Ähnliche Beiträge

HTML/CSS, Bilder werden nicht angezeigt?

Ich habe im <body> mehrere divs, in denen abwechselnd divs und Texte untereinander angezeigt werden sollen. Die Bilder sollen auf voller Höhe sein (height: 100vh;). Wenn ich die Bilder mit <img src=""> im HTML Code im div einfüge, wird es angezeigt. Will ich es aber in meiner CSS Datei als background-image vom div einfügen, wird der Bereich, wo das Bild sein sollte, einfach nur grau. Die style.css ist richtig in der HTML-Datei angegeben, da andere Styles funktionieren. Der Pfad ist ebenfalls richtig angegeben. Hat jemand Ideen, was ich falsch mache? :(

...zum Beitrag

HTML / CSS: div wird nicht angezeigt?

Ich fange gerade erst an und mein HTML-Code für div ist:

<body bgcolor="#333333">
  <div id="top"> </div>
</body>

und im CSS:

#top {
  background-color:aqua;
  width: 100%;
  height: 100px;
}

Aber wenn ich das im Browser angucken will, dann wird mir nichts angezeigt. Alles ist gespeichert und ich benutze Brackets. Davor hab ich es mit Atom ausprobiert, aber da funktioniert es auch nicht.

...zum Beitrag

Css background-image kleiner machen?

Wie kann ich bei css ein backrgound image kleiner machen?

...zum Beitrag

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zum Beitrag

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zum Beitrag

Bild in CSS formatieren?

Hallo,

ich habe ein kleines Problem:

Auf meiner Webseite gibt es ganz oben ein Bild, welches mit

background-image:

gesetzt wird. Doch es wird nicht der obere leere Linke Rand angezeigt. Kann ich das Bild irgentwie kleiner machen damit alles angezeigt wird? Z. B.:

background-image: 200px 200px url(“../img/image.jpeg”)

...zum Beitrag

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...zum Beitrag

Hintergrund bild im header wird nicht angezeigt?

Hallo, ich will in meine Html Website ein Bild als Hintergrund im Header haben, dies geht nicht, ich habe schon mehrmals gegoogelt und verschiedene Codes probiert, aber wenn ich die Seite aktualisiere bleibt sie weiß, und sagt, dass das Bild nicht gefunden werden konnte, obwohl ich es im gleichen Ordner habe wie meine Index und CSS Datei. Wisst ihr einen Rat? Danke im Voraus.

hier der Css Code:

.header{

min-height: 100vh;

width: 100%;

background-image: /*linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),*/ url(Website4/Dateien/Bilder/12.png);

background-position: center;

background-size: cover;

position: relative;

overflow: hidden;

}

...zum Beitrag

Wie löse ich das Problem mit dem Bildaustausch (hover, etc.)?

Hallo,

ich versuche in CSS ein Hintergrundbild auszutauschen bei hover, active, etc.
Leider klappt es aber nicht, da bei besuchten Links dennoch das Hintergrundbild angezeigt wird, welches aber nur angezeigt werden soll, wenn der Link noch nicht geöffnet wurde.

So sieht der Code aus (body):

<div>
      <ul>
        <li><a href="xyz" class="img-link" title="xyz">xyz</a><br/></li>

Bei der Klasse in css habe ich es dann so probiert:

a.img-link{
  display: inline-block;
  background: url(../img/li-button-blue.png);
  margin: 0 auto;
  text-align: center;
}
a.img-link:visited {
  background: url(../img/li-button-yellow.png);
}
a.img-link:hover {
  background: url(../img/li-button-red.png);
}
a.img-link:active {
  background: url(../img/li-button-lightblue.png);
}
a.img-link:focus {
  background: url(../img/li-button-green.png);

Vielleicht kann ja jemand helfen, ist wahrscheinlich total einfach.

Vielen Dank.

...zum Beitrag

Wechselndes Hintergrundbild in HTML?

Hallo, wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert. Ich habe das Hintergrundbild bisher im CSS definiert:

html{background: url(images/DSC_0601-01.JPG) no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Wäre nett wenn mir da jemand helfen könnte :)

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zum Beitrag

CSS Scroll-Parallax mit background-position?

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zum Beitrag

CSS > Zoomen deaktivieren?

Hey. Bei Browsern gibt es ja die Möglichkeit zu zoomen.

Und seit paar Jahren sind die Browser sogar so schlau und zommen die Hintergrundbilder und normale Bilder mit. (Also nicht wie anfangs nur den Text).

Kann man dieses Verhalten per CSS deaktivieren? Hab nen großen Background im Body der bei Browser-Zoomen nicht mit gezoomt werden soll, sondern nur der Inhalt..

Ist das möglich?

(Restliche Inhalte sind in Wrapper als Header, Menü und Content zusammengefasst)

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen