Image div css

Fermé
onizuka - 28 août 2015 à 14:57
 osotogari - 31 août 2015 à 20:03
Bonjour,

J'aimerai faire une feuille css externe pour mon fichier html, j'aimerai mettre une image en arrière plan dans un div exemple div id=leftBorder, etc

Voilà mon code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Tulips</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="index.css" />
</head>
<body>
<div id="content">

<div id="leftBorder"></div>
<div id="rightBorder"></div>
<div id="title">
<div id="pageName"><span>Tulips</span></div>
<div id="logo"></div>
</div>
<div id="page">
<div id="menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#link">Link</a></li>
<li><a href="#link">Link</a></li>
<li><a href="#link">Link</a></li>
<li><a href="#link">Link</a></li>
</ul>
</div>
<div id="header"></div>
</div>
<div id="subMenu">
<ul>
<li><a href="#sublink">Sub Link</a></li>
<li><a href="#sublink">Sub Link</a></li>
<li><a href="#sublink">Sub Link</a></li>
<li><a href="#sublink">Sub Link</a></li>
<li><a href="#sublink">Sub Link</a></li>
</ul>
</div>
<div id="main">

<h1>Test Header</h1>
<p>Comment have because but my your thanks give group max minimum fake tulips flowers make quate why what when where small large font image link contact network please sorry que ask beatifuly.</p>

<p>Comment have because but my your thanks give group max minimum fake tulips flowers make quate why what when where small large font image link contact network please sorry que ask beatifuly.</p>

<p>Comment have because but my your thanks give group max minimum fake tulips flowers make quate why what when where small large font image link contact network please sorry que ask beatifuly.</p>

<h1>Test Header</h1>
<p>Comment have because but my your thanks give group max minimum fake tulips flowers make quate why what when where small large font image link contact network please sorry que ask beatifuly.</p>

<p>Comment have because but my your thanks give group max minimum fake tulips flowers make quate why what when where small large font image link contact network please sorry que ask beatifuly.</p>
</div>
</div>
<div id="footer">
<div id="footerText">
Osman EROGLU / 2006 / Tulips / TR / <a href="mailto:***@***">***@***</a>
</div>
</div>
</body>
</html>

Merci d'avance

1 réponse

Avec dans votre fichier index.css la propriété background-image

#leftBorder{
background-image:url(imagedefond.png);

}

great teacher je ne sais pas, great learner pas vraiment en tout cas...c'est la base du CSS, 1h à lire/tuto un tuto CSS débutant devrais vous apprendre tout ce dont vous avez besoin.

Gamba té!
1
Bonjour,

Je sais qu'il faut noter comme ça mais justement ça ne fonctionne pas.

Merci
0
Quoi donc?
Vous l'avez mal fait si ça ne marche pas. Essayer de pratiquer à partir d'un fichier que vous créez vous même en suivant les sites de tuto comme déjà indiqué et pas en utilisant quelque chose de tout fait.

Au passage utiliser un code écrit en 2006 de nos jours c'est un peu comme marcher pieds nus sur du verre sans être fakir :)

Remplacez le doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

Par

<!DOCTYPE html>

qui est beaucoup plus clair, ne pose pas tout les problèmes d'une validation strict et concerne un langage moderne: HTML5

Pour le reste du code HTML il y a visiblement des répétitions inutiles ou quelque chose de manquant (et au delà de vos compétences?). Vous gagnerez du temps à tout recommencer d'un fichier vide pour partir sur des bases saines
0