Discussion :

[n0vocaine]

Bonjour je me suis lancé dasn le codage d'un site internet il y a peut et ma question porte sur les background à l'interieur d'un div.

Je voudrais savoir si il existe un moyen pour que l'image que je met en background au sein d'un div soit redimentionné automatiquement au dimention de celle-ci? et ce quelque soit la taille que prendra la fenetre de mon EI.

[12monkeys]

Bonsoir

Actuellement ce n'est pas possible, mais cela le sera avec CSS 3 : http://designshack.developpez.com/tu...ere-plans/#LII

[n0vocaine]

Merci "12monkeys". alors je suis obligé de coder un
design avec une taille pres def :/

Néanmoins j'ai cherché et touvé une petite
solution pas tres belle mais qui dépanne pour le moment.
Je la met en dessous

HTML

Code :

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

1
2
<div id="banniere"></div>
<img src="banniere.gif" id="banniere"/>

CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
#banniere
{
position: absolute;
left:10%;
top: 10%;
width:60%;    
height:25%;    
overflow: hidden;
border: 1px solid blue;
}

Reste un soucis les animations. J'ai fais des animations
en .gif pour aller avec "#banniere:hover" mais le probleme
c'est que la seul facon que j'ai trouvé pour les afficher c'est
en utilisant "background-image:url('');" et l'animation n'est
pas étiré aux valeurs de mon "div".

Si quelqu'un a une solution je suis prenneur!
merci d'avance

[andry.aime]

Bonjour,
La valeur de l'attribut id doit être unique dans un document, là tu as deux fois l'id=banniere, utilises plutôt l'attribut class.

[12monkeys]

Là la solution que tu utilises c'est d'intégrer l'image via la balise <img> directement dans le HTML, dans ce cas, en effet tu peut adapter la taille de l'image via width et/ou height...

En insérant une image via background-image tu ne pourra pas lui spécifier des dimensions (sauf CSS3)

Maintenant pour faire encore un peu plus compliqué tu peut rajouter une balise img en dessous où tu insères ton gif. Avec display:none tu le cache et avec #banniere:hover du l'affiches en le positionnant de manière absolue... A tester...

[n0vocaine]

Je vais essayé cela merci pour vos reponses.

[n0vocaine]

Tout marche merci beaucoup de vos conseils

Cordialement
Novo