Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP [CSS] dimensions d'une image de fond

[CSS] dimensions d'une image de fond

9 réponses
Avatar
Lea Gris
Comment peut-ons spécifier la dimensions d'une image de fond avec CSS ?

J'ai un fond ainsi :

#menu {
position: absolute;
z-index: 2;
top: 4em;
width: 10em;
height: auto;
margin: 0;
background: transparent url(test.png) no-repeat 0 0;
color: inherit;
}
html>body #menu {
position: fixed;
}

En fait la boîte possède une taille en unités «em» et une hauteur
automatique afin de s'adapter à la taille du texte et du contenu. (le menu
peut avoir la largeur proportionnelle à la police et une hauteur qui
s'adapte en fonction du nombre de rubriques qu'il contient et des éventuels
sauts de lignes supplémentaires).

Seulement j'aimerais que mon image de fond couvre tout le fond sans se
répéter (donc on s'adaptant dynamiquement à la taille de la boîte).

Ne voyant pas de propriétés accessible pour définir la taille de l'image de
fond quelle astuce peut remédier à ce problème ?

--
Léa Gris - http://www.noiraude.net/
() Campagne du ruban texte brut contre les courriels en HTML,
/\ contre les pièces jointes dans un format propriétaire.
Signaler un problème avec ce contenu

9 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Nicolas DEGAND
Lea Gris wrote:

En fait la boîte possède une taille en unités «em» et une hauteur
automatique afin de s'adapter à la taille du texte et du contenu. (le menu
peut avoir la largeur proportionnelle à la police et une hauteur qui
s'adapte en fonction du nombre de rubriques qu'il contient et des
éventuels sauts de lignes supplémentaires).

Seulement j'aimerais que mon image de fond couvre tout le fond sans se
répéter (donc on s'adaptant dynamiquement à la taille de la boîte).

Ne voyant pas de propriétés accessible pour définir la taille de l'image
de fond quelle astuce peut remédier à ce problème ?



Tu ne peux pas. Ce sera géré en CSS 3 avec background-size. Il existe peut
etre une solution en javascript. Si tu y arrives fais moi signe, ça
m'intéresse.

--
Nicolas DEGAND
Avatar
Christophe
Lea Gris a écrit:
Comment peut-ons spécifier la dimensions d'une image de fond avec CSS ?

J'ai un fond ainsi :

#menu {
position: absolute;
z-index: 2;
top: 4em;
width: 10em;
height: auto;
margin: 0;
background: transparent url(test.png) no-repeat 0 0;
color: inherit;
}
html>body #menu {
position: fixed;
}

En fait la boîte possède une taille en unités «em» et une hauteur
automatique afin de s'adapter à la taille du texte et du contenu. (le menu
peut avoir la largeur proportionnelle à la police et une hauteur qui
s'adapte en fonction du nombre de rubriques qu'il contient et des éventuels
sauts de lignes supplémentaires).

Seulement j'aimerais que mon image de fond couvre tout le fond sans se
répéter (donc on s'adaptant dynamiquement à la taille de la boîte).

Ne voyant pas de propriétés accessible pour définir la taille de l'image de
fond quelle astuce peut remédier à ce problème ?



Pour moi, c'est impossible en CSS. En HTML aussi, je crois. On peut
adapter la taille d'une image dans une cellule ou directement dans le
body (on exprime sa largeur en % dans <img>), mais pas si l'image est en
fond de tableau par un background.

--
____________________________________________________________________
http://batraciens.net/
"BATRACIENS" : Un site consacré à l'élevage et la maintenance des
batraciens, aquatiques ou terrestres.
Nombreuses Photos et articles de maintenance. Petites annonces.
____________________________________________________________________
____________________________________________________________________
Avatar
Christophe
Tu ne peux pas. Ce sera géré en CSS 3 avec background-size. Il existe peut
etre une solution en javascript. Si tu y arrives fais moi signe, ça
m'intéresse.


Au fait, la specification CSS3 est envisagée pour quand ?


--
____________________________________________________________________
http://batraciens.net/
"BATRACIENS" : Un site consacré à l'élevage et la maintenance des
batraciens, aquatiques ou terrestres.
Nombreuses Photos et articles de maintenance. Petites annonces.
____________________________________________________________________
____________________________________________________________________
Avatar
mauriz
Lea Gris a écrit :
Comment peut-ons spécifier la dimensions d'une image de fond avec CSS ?

J'ai un fond ainsi :

#menu {
position: absolute;
z-index: 2;
top: 4em;
width: 10em;
height: auto;
margin: 0;
background: transparent url(test.png) no-repeat 0 0;
color: inherit;
}
html>body #menu {
position: fixed;
}

En fait la boîte possède une taille en unités «em» et une hauteur
automatique afin de s'adapter à la taille du texte et du contenu. (le menu
peut avoir la largeur proportionnelle à la police et une hauteur qui
s'adapte en fonction du nombre de rubriques qu'il contient et des éventuels
sauts de lignes supplémentaires).

Seulement j'aimerais que mon image de fond couvre tout le fond sans se
répéter (donc on s'adaptant dynamiquement à la taille de la boîte).

Ne voyant pas de propriétés accessible pour définir la taille de l'image de
fond quelle astuce peut remédier à ce problème ?



En PHP ca devrait être faisable : tu génère automatiquement un image de
la bonne taille
grâce à la bibliothèque GD.
Avatar
Lea Gris
Nicolas DEGAND wrote:

Lea Gris wrote:

En fait la boîte possède une taille en unités «em» et une hauteur
automatique afin de s'adapter à la taille du texte et du contenu. (le
menu peut avoir la largeur proportionnelle à la police et une hauteur qui
s'adapte en fonction du nombre de rubriques qu'il contient et des
éventuels sauts de lignes supplémentaires).

Seulement j'aimerais que mon image de fond couvre tout le fond sans se
répéter (donc on s'adaptant dynamiquement à la taille de la boîte).

Ne voyant pas de propriétés accessible pour définir la taille de l'image
de fond quelle astuce peut remédier à ce problème ?



Tu ne peux pas. Ce sera géré en CSS 3 avec background-size. Il existe peut
etre une solution en javascript. Si tu y arrives fais moi signe, ça
m'intéresse.



Je viens de penser à une astuce. Il faut encore que je la teste :

<div class="menu">
<img class="adapt" src="test.png">
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>

div.menu {
position: absolute;
z-index: 2;
top: 4em;
width: 10em;
height: auto;
margin: 0;
background: transparent;
color: inherit;
}
html>body .menu {
position: fixed;
}

img.adapt {
z-index: 1;
margins: 0; padding: 0;
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
border: 0;
}

En fait j'essaye de sortir le bloc de l'image du flux à l'intérieur du menu
et de lui donner la dimentions et position relative à son conteneur
(absolue selon le flux dans la boîte conteneur du menu).
Avec un z-index inférieur au contenu du menu et un fond transparent,
normalement l'image devrait apparaître en arrière plan du restant du menu
resté dans le flux normal. (espéront)

--
Léa Gris - http://www.noiraude.net/
() Campagne du ruban texte brut contre les courriels en HTML,
/ contre les pièces jointes dans un format propriétaire.
Avatar
Lea Gris
Lea Gris wrote:

Nicolas DEGAND wrote:

Lea Gris wrote:

En fait la boîte possède une taille en unités «em» et une hauteur
automatique afin de s'adapter à la taille du texte et du contenu. (le
menu peut avoir la largeur proportionnelle à la police et une hauteur
qui s'adapte en fonction du nombre de rubriques qu'il contient et des
éventuels sauts de lignes supplémentaires).

Seulement j'aimerais que mon image de fond couvre tout le fond sans se
répéter (donc on s'adaptant dynamiquement à la taille de la boîte).

Ne voyant pas de propriétés accessible pour définir la taille de l'image
de fond quelle astuce peut remédier à ce problème ?



Tu ne peux pas. Ce sera géré en CSS 3 avec background-size. Il existe
peut etre une solution en javascript. Si tu y arrives fais moi signe, ça
m'intéresse.



Je viens de penser à une astuce. Il faut encore que je la teste :

<div class="menu">
<img class="adapt" src="test.png">
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>

div.menu {
position: absolute;
z-index: 2;
top: 4em;
width: 10em;
height: auto;
margin: 0;
background: transparent;
color: inherit;
}
html>body .menu {
position: fixed;
}

img.adapt {
z-index: 1;
margins: 0; padding: 0;
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
border: 0;
}

En fait j'essaye de sortir le bloc de l'image du flux à l'intérieur du
menu et de lui donner la dimentions et position relative à son conteneur
(absolue selon le flux dans la boîte conteneur du menu).
Avec un z-index inférieur au contenu du menu et un fond transparent,
normalement l'image devrait apparaître en arrière plan du restant du menu
resté dans le flux normal. (espéront)




Pourlement j'ai réussi à obtenir le résultat souhaité avec Mozilla on
donnant un z-index: -1; à l'image. Cela ne fonctionne pas avec Konkerror
3.1.3 qui s'obstine à placer l'image par devant.

Sinon l'image se met bien à l'échelle de la boîte div du menu avec Mozilla
et konkerror fait n'importe quoi avec la dimention et le positionnement.

J'ignore ce que cela donne avec IE.

Bref c'est pas génialement parti.



--
Léa Gris - http://www.noiraude.net/
() Campagne du ruban texte brut contre les courriels en HTML,
/ contre les pièces jointes dans un format propriétaire.
Avatar
Pleurote du Panicaut
Dans le message bho4tu$2ngu$,
Lea Gris nous écrivit :
Comment peut-ons spécifier la dimensions d'une image de fond avec CSS ?



CSS3 bientôt. En attendant, tu mets ton image en toute première position de
ta page avec un height0% et with0%, et juste après, tu ouvres un DIV
en position absolu avec fond transparent contenant ton menu.

--
Bon usage
--
Jean-Paul Boussac, HTLM-Kit en français, tutorial et description détaillée :
http://boussac.online.fr/Windows/HTML-Kit.html
La liste de discussion : http://fr.groups.yahoo.com/group/HTML-Kit/
Avatar
Lea Gris
Pleurote du Panicaut wrote:

Dans le message bho4tu$2ngu$,
Lea Gris nous écrivit :
Comment peut-ons spécifier la dimensions d'une image de fond avec CSS ?



CSS3 bientôt. En attendant, tu mets ton image en toute première position
de ta page avec un height0% et with0%, et juste après, tu ouvres un
DIV en position absolu avec fond transparent contenant ton menu.



Je veux juste l'image comme fond du menu.
J'ai testé avec les valeurs 100% pour l'image et ça semble convenir aussi à
Konkerror.

Il reste que Konkerror persiste à dessiner l'image par dessus le contenu du
menu au lieu de la laisser en-desosus même en spécifiant un z-index :

img.adapt {
margin: 0; padding: 0;
position: absolute;
z-index: -1;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
div.menu {
position: absolute;
z-index: 2;
top: 4em;
width: 10em;
height: auto;
margin: 0;
background: transparent;
color: inherit;
}
html>body .menu {
position: fixed;
}

<div class="menu">
<img class="adapt" src="test.png" />
<ul id="nav" title="navigation">
<li><a title="Retour à la page d'accueil" href="index">Accueil</a></li>
<li><a title="Ressources diverses" href="ressources">Ressources</a></li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
</div>

--
Léa Gris - http://www.noiraude.net/
() Campagne du ruban texte brut contre les courriels en HTML,
/ contre les pièces jointes dans un format propriétaire.
Avatar
Nicolas DEGAND
Pleurote du Panicaut wrote:

Dans le message bho4tu$2ngu$,
Lea Gris nous écrivit :
Comment peut-ons spécifier la dimensions d'une image de fond avec CSS ?



CSS3 bientôt. En attendant, tu mets ton image en toute première position
de ta page avec un height0% et with0%, et juste après, tu ouvres un
DIV en position absolu avec fond transparent contenant ton menu.



Et si la page fait plus d'un écran de long ? A ma connaissance height: 100%
ne fonctionne pas dans ce cas de figure (les navigateurs disent que 100 % 1 écran en général) ? Enfin c'est ce que j'ai conclu de mes tests et j'ai
été obligé de faire un pifométrique height: 400%

--
Nicolas DEGAND