zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Warum werden meine Hintergrundbilder nicht angezeigt?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.06.2013, 16:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 10
ChaosZarth befindet sich auf einem aufstrebenden Ast
Standard Warum werden meine Hintergrundbilder nicht angezeigt?

Hi Forum,

es ist schon etwas peinlich diese Frage zu stellen, aber ich komme nicht drumrum.

Ich habe zwei Bilder in Gimp erstellt. Das eine ist ein ganz schwarzer Hintergrund namens 'black.png', das andere ein durchsichtiger Hintergrund mit unten rechts einer weißen ecke names 'transparent-white.png'. Die Bilder befinden sich im Ordner 'img' in dem root-Verzeichnis der Seite.

Mein html bzw. css-Code sieht folgendermaßen aus:
html
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
        
    </head>
    <body>
        <div id="backgrnd">&nbsp;</div>
        <div id="foregrnd">&nbsp;</div>
    </body>
</html>
css, liegt im Unterordner css
Code:
#backgrnd {
    background-image: url('../img/black.png');
    background-repeat: no-repeat;
    position: absolute;
    top:0px; 
    left:0px;
    z-index: 10;
}
#foregrnd {
    background-image: url('../img/transparent-white.png');
    background-repeat: no-repeat;
    position: relative;
    top:-1002px; 
    left:0px;
    z-index: 100;
}
Das #backgrnd-Bild ist 1002px hoch, deswegen der top:-1002px;-Wert. Vieleicht mache ich ja einen essentiellen Fehler und jemand kann mir sagen wie ich es richtig machen muss.

Ich sehe inzwischen wahrscheinlich den Wald vor lauter Bäumen nicht mehr .

Hoffentlich könnt ihr mir schnell weiterhelfen...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.06.2013, 16:30
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Und so geht es auch:

HTML-Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
        
    </head>
    <body>
        <div id="foregrnd">&nbsp;</div>
    </body>
</html>
Code:
body {
    background-color:black;
}
#foregrnd {
    background-image: url('../img/transparent-white.png');
    background-repeat: no-repeat;
    background-position:top left;
    height: ? ;    // Angabe Wert ergänzen
    width: ? :     // Angabe Wert ergänzen
}
Siehe dazu auch background-position: Hintergrund positionieren: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.06.2013, 16:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 10
ChaosZarth befindet sich auf einem aufstrebenden Ast
Standard

Danke für die schnelle Hilfe, habe jetzt die css-Datei angepasst:
Code:
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #000;
}
/*#backgrnd {
    background-image: url('../img/black.png');
    background-repeat: no-repeat;
    position: absolute;
    top:0px; 
    left:0px;
    z-index: 10;
}*/
#foregrnd {
    background-image: url('../img/transparent-white.png');
    background-repeat: no-repeat;
    background-position: top left;
    height:1000px; 
    width:100%;
    /*z-index: 100;*/
}
nur height in #foregrnd muss ich einen px-Wert zuweisen, wieso eigentlich? Habe es mit 100% versucht, aber das Ergebnis war ernüchternd. Er zeigte nur noch den schwarzen Hintergrund von body an.

Danke nochmal für die Hilfe; wenn du mir die Frage aus dem Absatz hier drüber noch beantworten könntest wäre ich superfroh...
Mit Zitat antworten
  #4 (permalink)  
Alt 21.06.2013, 17:19
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

CSS:
Code:
* {
    margin: 0;
    padding: 0;
}
Das sollte man nicht machen. Der Unverselektor setzt damit jegliche Formatierung der Abstände bei allen Elementen ausser Kraft.
Wenn du den Rahmen weg haben willst, dann reicht folgendes:
Code:
html, body {
    margin: 0;
}
Wenn du 100% Höhe haben willst, dann muss das Elternelement auch 100% Höhe bekommen.

Daher hinzugefügt zu obiger Angabe:
Code:
html, body {
    margin: 0;
    height: 100%;
}
Damit setzt du nun die Seitenhöhe auf den Wert 100% und die Elemente können sich daran ausrichten.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.06.2013, 17:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2013
Beiträge: 10
ChaosZarth befindet sich auf einem aufstrebenden Ast
Standard

Funktioniert

Supi, Danke!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
ImageFlow: Bilder werden nicht angezeigt crossgolfer85 Javascript & Ajax 6 22.02.2011 16:16
Navigationslinkhintergrund wird nicht korrekt angezeigt! a-z CSS 4 02.07.2010 08:22
Fokus auf Checkbox wird nicht angezeigt krümel CSS 1 16.03.2009 23:55
Text zu Groß für Box, Es soll ein Scrollbalken angezeigt werden michi-muc CSS 1 04.02.2008 21:41
Hintergrundbilder werden bei CSS nicht angezeigt WhitePalms CSS 6 03.12.2005 14:38


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:14 Uhr.