Webpage image de fond ne se charge pas

J'utilise le CSS suivant pour définir mon fond:Webpage image de fond ne se charge pas

body 
{ 
    background-image: url('background.png'); 
    font-size: 12pt; 
    font-family: Veranda, Arial, Helvetica, sans-serif; 
}

L'image background.png est stockée dans le répertoire racine, mais chaque fois que je rafraîchir la page Web, l'arrière-plan reste blanc . Mon instructeur a actuellement une copie de mes fichiers et essaie de comprendre lui-même, bien que le problème n'était pas évident pour lui d'un coup d'œil rapide. Mon plein html et css sont les suivantes:

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"> 

<html> 
<head> 
<meta http-equiv="content-type" content = "text/html charset = utf-8" /> 
<link rel = stylesheet href = "style.css" type = "text/css" media = screen> 
<title> 
Title 
</title> 
</head> 

<body> 
<div id = "wrapper"> 
    <div id = "leftsidebar"> 
     <h3> Navigation </h3> 
    </div> 

    <div id = "content"> 
     <h1> Heading 1 </h1> 
     <h2> Heading 2 </h2> 

     <p align = "justify"> Paragraph 1.</p> 

     <p align = "justify"> Paragraph 2 </p> 

     <p align = "justify"> Paragraph 3 </p> 
    </div> 
</div> 
</body> 

</html>

CSS:

<style type = "text/css"> 
<!-- 
body 
{ 
    background-image: url('background.png'); 
    font-size: 12pt; 
    font-family: Veranda, Arial, Helvetica, sans-serif; 
} 

div#wrapper 
{ 
    width: 80%; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 0px; 
    border: thin solid #000000; 
} 

div#header 
{ 
    padding: 15px; 
    margin: 0px; 
    text-align: centre; 
} 

div#leftsidebar 
{ 
    width: 25%; 
    padding: 10px; 
    margin-top: 1px; 
    float: left; 
} 

div#content 
{ 
    margin-left: 30%; 
    margin-top: 1px; 
    padding: 10px; 
} 

div#footer 
{ 
    padding: 15px; 
    margin: 0px; 
    border-top: thin solid #000000; 
} 
--> 
</style>

Source

2010-10-14 Chris Wilson

est votre background.png également dans le répertoire racine? Je ne recommanderais généralement pas d'utiliser des chemins relatifs de cette manière (commencer par/(racine)). Aussi, vous pouvez utiliser firebug pour voir si le img obtient la charge du tout ... aussi, quoi avec les espaces blancs étranges entre les attributs et les valeurs dans l'élément de lien? – Hannes

fichiers CSS ne sont pas censés contenir

<style type = "text/css"> 
<!--

Je suppose que cela conduit à une erreur analysant le premier bloc CSS (le body).

Source

2010-10-14 10:43:36

html n'est pas autorisé à vous Style.css

Vous devez retirer le <style type = "text/css">, la balise html commentaire <!-- et, évidemment, les balises de fermeture pour chacun.

Vous n'avez pas non plus besoin du '' autour de l'url de fond, il peut être écrit comme ça. Apportez ces modifications, et en supposant que background.png se trouve dans le bon répertoire, cela fonctionnera.

Source

2010-10-14 11:23:51

Webpage image de fond ne se charge pas

Répondre

Questions connexes