Image responsive comme l'arrière-plan

Bonjour,

Dans une page en HTML5, j'ai fait un tableau de 600x125, et j'ai défini une image de 600x125 comme l'arrière-plan de ce tableau.
Le tableau et le texte que j'écris dans le tableau ne s'affichent pas d'une façon responsive (sur un écran par exemple 320x760).

Pour rendre responsive une image indépendante, on peut faire quelque chose, mais celle-ci est une image définie comme l'arrière-plan du tableau.

Y'a-t-il une solution pour ceci, compatible avec tous les navigateurs?
Voici les codes HTML5 de l'image de l'arrière-plan:

background-image: url('ab/cn/pn600x125.png');

Merci par avance;
Bien cordialement,

Hello,

C'est assez difficile de deviner sans avoir un peu plus de contexte, donc je te donne la piste qui correspond à la majorité des cas de figure :
- Pour "l'image d'arrière-plan qui ne s'affiche pas de manière responsive", il y a la déclaration background-size: cover; : https://developer.mozilla.org/fr/docs/Web/CSS/background-size
- Pour "le texte qui ne s'affiche pas de manière responsive", une autre discussion est en cours sur le forum : https://forum.alsacreations.com/topic-27-91225-1-Balise-h1-adaptative.html

Bonne chance avec ces premières pistes !
Modifié par Raphael (29 Nov 2024 - 18:52)

Bonjour Raphael,

Merci pour la réponse.
J'ai utilisé background-size: cover; mais rien n'a changé.
Peut-être, j'ai mal placé les codes.
Les codes actuels qui ne fonctionnent pas sont les suivants:

Codes dans la partie des css:

.auto-style21{
background-image: url('ab/cn/pn600x125.png');
background-size: cover;
}

Et codes du tableau:

<table  style="width: 600px; text-align: center; height: 125px;" class="auto-style21" >

Bien cordialement,
Modifié par AM250 (29 Nov 2024 - 22:29)

Ah mais si tu fixes une taille de tableau à 600px, ça ne s'adaptera pas sur des petits écrans.

Essaye une déclaration qui permette de se réduire. Par exemple `max-width: 600px`

J'ai quelques questions :
1. Pourquoi as-tu une partie des styles dans la classe `auto-style21` et une autre en ligne dans `style=`.
2. Tu utilises ce tableau *uniquement* pour placer ton image de fond et ton texte ? Dans ce cas c'est loin d'être approprié ni idéal.

Bonjour Raphael,

En ce qui concerne max-width, je l'ai essayé sans le réussir.
Et en ce qui concerne vos questions:

1- En effet, le logiciel Microsoft Expression web 4 que j'utilise depuis longtemps crée automatiquement plusieurs ".auto-style"s, en haut de chaque page.
Si nécessaire, je manipule ces ".auto-style"s.

2- j'ai pensé à utiliser quelques images de l'arrière-plan pour les tableaux qui sont essentiellement pour les titres des articles. Jusqu'à maintenant sans succès bien sûr.

Peut-on essayer de remplir l'arrière-plan d'un "div" par une image sans passer par les tableaux?

Merci encore,
Et bien cordialement
Modifié par AM250 (30 Nov 2024 - 20:41)

Hello,

"En ce qui concerne max-width, je l'ai essayé sans le réussir." --> Difficile de se prononcer sans savoir exactement ce que tu as fait, sur quel élément tu l'as appliqué, etc.

"Si nécessaire, je manipule ces ".auto-style"s." --> Oui, sur le principe c'est toujours mieux que de mélanger des styles (parfois dans des classes, parfois en "style=")

"j'ai pensé à utiliser quelques images de l'arrière-plan pour les tableaux qui sont essentiellement pour les titres des articles. " --> Je ne comprends pas la présence de tableaux dans cette explication. En fait, je ne suis même pas sûr de comprendre exactement ce que tu veux obtenir : c'est "juste" un titre avec une image de fond ? Si tel est le cas, l'élément HTML pour désigner un titre est <h1> ou <h2>, etc. auquel tu appliques une image de fond.

"Peut-on essayer de remplir l'arrière-plan d'un "div" par une image sans passer par les tableaux?" --> Les tableaux ne sont pas faits pour ça en effet : ici tu ne manipules pas des "données tabulaires" dans le vrai sens du terme. Div n'est pas forcément nécessaire non plus.

Encore une fois, difficile de deviner comment t'orienter sans savoir ce que tu veux faire. Tu n'as vraiment pas un exemple visuel de ta maquette ou ton composant à produire ?

Bonjour,
Je vous remercie encore une fois, cher Raphael, pour vos réponses responsables.
Je vais me concentrer un peu plus sur ces sujets; et si nécessaire, je vous mettrais au courant.
Bien cordialement,