Discussion :

[cobby]

Bonjour,

Pour créer un thème Joomla je désire avoir une image sur toute la largeur de ma page sans bordure latérale quelque soit la résolution et le navigateur utilisé. Mon image fait 209 p en hauteur et 1600 en largeur. Je peux en couper en largeur et pas en hauteur.

Dans un premier temps j'ai coupé avec Photoshop mon image pour l'avoir à 1200.

J'ai mis le code suivant:


dans index.php:

<!-- Begin Header Bar -->
<div id="header-bar">
</div>
<!-- End Header Bar -->


dans le css:

#header-bar {height: 210px;width 100%; padding-top: 12px;margin-bottom: 5px;padding-bottom: 8px; background: url(../images/header.jpg) top center no-repeat;}

Ca ne marche pas.
Comment faut il faire ?
Avoir plusieurs images en fonction de la résolution ?
Y a t'il possibilité que l'image soit rognée sur les bords quand elle est trop grande par rapport à la résolution ?


Merci pour votre aide,

Christophe (pas informaticien).

[limaleclaga]

Bonjour,

dans le css:

#header-bar {height: 210px;width 100%; padding-top: 12px;margin-bottom: 5px;padding-bottom: 8px; background: url(../images/header.jpg) top center no-repeat;}

essais de mettre 2 points apres "width" =>width:100%

[GihefBey]

Bonjour,

Avec une image en arrière-plan ce n'est pas possible.

Insère l'image avec <img /> dans l'en-tête et attribue-lui une

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#header-bar img {
  display : block;
  width : 100%;
  }

[cobby]

Comment j'utilise le code donné:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#header-bar img {
  display : block;
  width : 100%;
  }

Que dois je mettre pour lui dire que mon image s'appelle header.jpg
Je laisse mon code et rajoute celui-ci?

Merci,

Christophe

[Bovino]

Une balise image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="header.jpg" alt="Header" />

dans le html

[GihefBey]

Exactement.

Et donc, avec un résultat comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="header-bar">
  <img src="header.jpg" alt="bannière" />
</div>

Tu peux même la mettre dans un lien.

Mais teste bien.
Parce que ça peut donner un résultat assez moche cette image qui va s'agrandir, se rétrécir.