5568 sujets

Sémantique web et HTML

Background et width ?

Bonjour,

j'ai vu un peu partout que ce problème est récurrent mais je vois pas trop comment m'en sortir, voilà le topo:

Je voudrais mettre un background sur mon site mais l'image fait un 1280*760 (enfin c'est une grosse image quoi Razz ) du coup sur une résolution 1024 on ne pourra pas la voir en entier.

J'ai essayé dans un table mais elle dépasse sur la droite de l'écran:


<body>
   <table border=1  background="image.jpg" style="width:100%;height:100%">
         <tr>
            <td>
            </td>
         </tr>
   </table>
</body>


Y'a-t-il un moyen pour mettre une image en fond de site qui prenne la résolution de l'écran?

Ou alors qu'elle se rétréssisse à l'écran si celui est trop petit, ou bien reste à sa taille en laissant des marges à gauche et à droite si l'écran est trop grand?

Merci je patauge un peu là ^^
Bonjour,

Il faudrait utiliser la propriété CSS background (et pas l'attribut HTML du même nom), ou bien les deux propriétés CSS background-image et background-position.

Il y a plein de doc partout sur l'utilisation des différentes propriétés CSS, les valeurs qu'elles acceptent, etc. Donc je te laisse chercher un peu. Smiley cligne
Merci pour la réponse Smiley smile

En fait j'ai déjà mis mon image en background via css avec un no-repeat center center mais le souci et que je perd la gauche et la droite de mon image sur des résolutions plus petite que mon image.

C'est pour ça que j'ai essayé de tricher avec un table il me semblait qu'on pouvait forcer un image à remplir une cellule à sa taille et là du coup il ne me restait plus qu'à donner un width 100% à la cellule Smiley ohwell

Mais apparement c'est pas bon ^^

Bon ben je vais continuer mes fouilles et je vous dirais si j'ai un truc Smiley smile
Bonjour,

Une piste de réflexion:

[#black][b]HTML[/b][/#]


<div id="page">

<img id="fond" src="fond.png" alt="" />

<div id="contenu">
Lorem ipsum dolor sit amet…
</div>	
	
</div>


[#black][b]CSS[/b][/#]

#page {text-align:center;}
#fond {width:100%; max-width:1280px;}
#contenu {position:absolute; top:0; width:960px; left:50%; margin-left:-480px; text-align:left;}

Modifié par Benjamin D.C. (29 Dec 2007 - 19:31)
On a traité le sujet avec quelques détails il y a quelques jours à peine. Une petite recherche sur le forum permettra peut-être de le retrouver?

Je résume tout de même au cas où:
1. pas de solution miracle;
2. des bricolages plus ou moins satisfaisants sont envisageables.
Modifié par Florent V. (29 Dec 2007 - 23:33)
Sujet clos
Aller à