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

background-image wird nicht genommen!

M

McKeen

Neues Mitglied
Hallo,

Ich habe ein Problem und zwar möchte ich ein Design für das CMS Ilch erstellen. Das Problem jedoch ist: Das CSS-Tag "background-image" wird gar nicht genommen!

Hier einmal meine dateien:

index.htm:
HTML: 
<html>
<head>
    <title>{TITLE}</title>
    <link rel="stylesheet" href="include/designs/DivineRapier/style.css" type="text/css"/>
</head>
<body>
    <div id="kopfleiste">
    XDXDXDXD
    </div>
</body>
</html>
style.css:
Code: 
body
{
text-align: center;
background-image: url(include/designs/DivineRapier/Background/headerbild.jpg);
}

div#kopfleiste
{
background-image: url(include/designs/DivineRapier/Background/kopfleiste.jpg);
}

div#flash
{
background-image: url(include/designs/DivineRapier/Background/headerbild.jpg);
}

div#wrapper
{
text-align: center;
background-color: 000000;
}
Das ist das erste mal bei mir, dass es nicht klappt und ich habe auch schon nach tippfehlern etc. gesucht, aber nichgts gefunden. Vielleicht findet ihr ja was :)

mfg

McKeen

PS: Ich habe das headerbild.jpg zweimal drin, weil ich testen wollte, obs beim body geht, wenn schon nciht beim #flash-div
 
Du hast den Pfad falsch definiert. Die CSS-Datei liegt in

include/designs/DivineRapier/style.css

und innerhalb der CSS-Datei wiederum definierst Du diesen Pfad

include/designs/DivineRapier/Background/headerbild.jpg

relativ zur CSS-Datei für das Bild. Folglich sucht der Browser das Bild unter

include/designs/DivineRapier/include/designs/DivineRapier/Background/headerbild.jpg

wo es natürlich nicht ist.

Lösung: setz ein "/" vor den Pfad zum Bild und vor den Pfad zur CSS-Datei. Also:

/include/designs/DivineRapier/style.css
und
/include/designs/DivineRapier/Background/headerbild.jpg
 
das wäre mir klar threadi, jedoch passe ich das design an das cms ilch an und dort soll man das so machen^^ ich habs auch schon auf die andere weis eprobiert, aber es klappt leider immer noch nicht :(
trotzdem danke :)
 
Dann musst Du den Pfad zum Bild relativ zur CSS-Datei angeben. Also:

Code: 
Background/headerbild.jpg
 
hmm? und was ist daran jetzt anders, als das, was du vorher gesagt hast?^^ ich glaube ich versteh dich falsch :D
 
Bei meinem ersten Vorschlag hatte ich empfohlen absolute Pfadangaben zu verwenden. Da dir das aber scheinbar nicht möglich ist bezieht sich mein zweiter Vorschlag auf eine relative Pfadangabe. Das verwendest Du momentan zwar auch, nur eben falsch.
 
Um es mal anschaulich zu formulieren, was threadi versucht zu erklären, du hast folgende Ordnerstruktur:

/index.htm

/include/designs/DivineRapier/style.css
/include/designs/DivineRapier/Background/headerbild.jpg

Anders als beim PHP Include, geht eine URL-Angabe in CSS-Dateien von der Datei selbst aus, nicht von der Datei, in die eingebunden wird, sprich:
Pfadangabe zum Bild von der CSS-Datei aus.

wäre dann background-image:url('./Background/header.jpg');.

Und wenn du jetzt immernoch nicht verstehst, was gemeint ist, setze dich nochmal intensiver mit der Materie auseinander.
 
ich habe folgende ordnerstriktur:

/index.php

/include/designs/DivineRapier/index.htm
/include/designs/DivineRapier/style.css
/include/designs/DivineRapier/Background/headerbild.jpg

In der Ilchdokumentation zum Design steht, dass man den kompletten pfad von dem /include aus nehmen muss, da ja im prinzip alles über die index.php läuft.

und genauso wie in deinem beispiel ist es nicht anders :(
 
In der Ilchdokumentation zum Design steht, dass man den kompletten pfad von dem /include aus nehmen muss, da ja im prinzip alles über die index.php läuft.
Zum Vergrößern anklicken....
Anders als beim PHP Include, geht eine URL-Angabe in CSS-Dateien von der Datei selbst aus, nicht von der Datei, in die eingebunden wird, sprich:
Pfadangabe zum Bild von der CSS-Datei aus.
Zum Vergrößern anklicken....

In CSS läuft das nicht von der index-Datei aus, sondern von der CSS-Datei, hatte ich bereits geschrieben. Da kann mir die Ilchdokumentation sonst noch was erzählen, läuft definitiv von der CSS-Datei aus.
 
Ich danke euch allen für eure hilfe, NetzSchleicher, deins war die lösung, es lag irgendwie an der aktualisierung, als ich es dann mit strg+F5 probierte, gings Oo
 
Hallo,

Ich habe leider ein weiteres problem und zwar habe ich nun die kopfleiste fertig, doch wenn ich den hintergrund (welcher aus drei teilen besteht) nun reinmachen möchte, dann erstreckt der sich nur über die gesamte breite, wenn ich ihm pisition:absolute gebe und selbst dann ist es fehlerhaft, da er dann nur den hintergrund aus der letzten div anzeigt. Ich habe bei width: 100% eingestellt, es klappt jedoch leider nicht.

Hier mal meine Dateien:

style.css:
Code: 
html
{
height: 100%;
}

body
{
text-align: center;
height: 100%;
max-width: 800px;
}

div.kopfleiste
{
background: url('./Background/kopfleiste.jpg');
z-index:1;
min-width: 100%;
max-height: 40px;
position: absolute;
top: 0px;
left: 0px;
}

div.welcomekopfleiste
{
background: url('./Background/welcomekopfleiste.jpg');
z-index:5;
max-height: 40px;
min-height: 40px;
min-width: 230px;
position: absolute;
top: 0px;
left: 0px;
}

input.search
{
background-image: url('./Background/suche.jpg');
z-index: 3;
height: 35px;
width: 179px;
position: absolute;
top: 0px;
right: 0px;
border: none;
}

div.search
{
background-image: url('./Background/suche.jpg');
z-index: 3;
height: 35px;
width: 179px;
position: absolute;
top: 0px;
right: 0px;
border: none;
color: none;
}

input.searchsub
{
z-index: 4;
position: absolute;
background: transparent;
border: none;
top: 5px;
right: 5px;
width: 40px;
height: 28px;
}

input.searchput
{
background: transparent;
z-index: 8;
height: 23px;
width: 119px;
position: absolute;
top: 8px;
right: 38px;
border: none;
font-style: bold;
color: #666666;
}

div.flashbg
{
background-image: url('./Background/headerbildbackground.jpg');
min-width: 100%;
min-height: 365px;
left:0px;
top: 0px;
right:0px;
}

div.flash
{
background-image: url('./Background/headerbild.jpg');
max-width: 1000px;
min-height: 365px;
position:absolute;
left:0px;
top: 0px;
right:0px;
z-index: 2;
}

div.zwischenleiste
{
background-image: url('./Background/zwischenleiste.jpg');
min-width: 100%;
min-height: 11px;
left:0px;
top: 0px;
right:0px;
z-index: 1
}

div.bgcontent
{
background-image: url('./Background/backgroundcontent.jpg');
min-width: 100%;
min-height: 300px;
left:0px;
top: 0px;
right:0px;
}

div.wrapper
{
background-color: #bb000f;
width: 800px;
margin: 0 auto;
position: absolute;
right: 0px;
top: 0px;
left: 0px;
}

div.footer
{
background: url('./Background/footer.jpg');
z-index:1;
min-width: 100%;
max-height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: bottom;
}

div.copyrightfooter
{
background: url('./Background/copyrightfooter.jpg');
z-index:5;
max-height: 40px;
min-height: 40px;
min-width: 230px;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: bottom;
}

index.htm:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">
<head>
    <title>{TITLE}</title>
    <link rel="stylesheet" href="include/designs/DivineRapier/style.css" type="text/css"/>
    

</head>
<body>
    <div class="flashbg">
    </div>
    
    <!--<div class="flash" align="center">-->
    </div>
    
    <div class="zwischenleiste">
    </div>
    
    <div class="bgcontent">
    </div>
    
    <div class="kopfleiste">
    {_boxes_search}
    <div class="welcomekopfleiste">
    </div>
    
    </div>
    <!--<div class="wrapper">
        {_boxes_statistik}
        {EXPLODE}
        
    </div>-->
    
    <div class="footer">
    </div>
    
    <div class="copyrightfooter">
    </div>
</body>
</html>
 
Dein HTML-Code enthält einen Fehler:

Code: 
        <!--<div class="flash" align="center">-->
        </div>

Das schließende </div> hier hat keine öffnende Entsprechung.

Außerdem wäre es schön, wenn du dein Beispiel (auch den CSS-Teil) auf relevante Inhalte beschränken könntest. Noch besser wäre ein Onlinebeispiel der Seite, da hier niemand deine Grafiken lokal auf dem Rechner hat.

Du gibst deinem body-Element eine Breite von 800px. Ein div-Element ist standardmäßig so breit wie das Rahmenelement, kann also nicht breiter als 800px sein. Ist es das, was du meinst?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben