28172 sujets

CSS et mise en forme, CSS3

[Résolu] Le fond d'écran sur css veut plus s'afficher

bonjour
j e n'ai pas changé le code mais le fond du css ne s'affiche plus

https://www.proinvention.com/

.wagon10 { width: 300px; background-image: url(/http://www.proinvention.com/fond.png); }

.wagon11 { width: 300px; background-image: url(/http://www.proinvention.com/wildtextures-old-paper-closeup-texture.jpg); }

.wagon12 { color:white !important; width: 650px; background-image: url(/http://www.proinvention.com/ardoise.jpg)}
Modifié par hountsi (30 Mar 2023 - 18:36)
Hello,

La propriété background-image en css se déclare comme ceci :
background-image: url("https://monsite.com/image.png");


Dans ton code, il y a un slash devant le http et il manque les guillemets autour du lien :
background-image: url(/http://www.proinvention.com/fond.png);


Tu as également de nombreuses erreurs signalées dans la console du navigateur, et je pense que ton code HTML n'est pas correct. Je te recommande de passer ton site au validateur HTML afin d'avoir une liste des points à corriger. Si tu produis du CSS qui se base sur une structure HTML incorrecte, ça va être compliqué de bien faire comprendre au navigateur ce qu'il doit interpréter.
Bon courage Smiley smile
Meilleure solution
Bonjour
Je vous remercie
G corrige bien qu'avant ?a marchait
Je me rend compte que ?a marche dans lE mais pas dans google chrome
Modérateur
Bonjour,

1) Ça semble marcher avec Chrome chez moi (je vois les images de fond d'écran qui posaient problème).

2) Dans le code html et le code css, il faudrait remplacer partout où il apparait http://www.proinvention.com par https://www.proinvention.com (le "s" dans "https" est important). Ça peut éventuellement expliquer que certaines parties du site fonctionnent avec IE et ne fonctionnent pas avec Chrome. Et au passage, ça supprimera quelques erreurs qu'on voit dans la console.

Amicalement,
parsimonhi a écrit :
2) Dans le code html et le code css, il faudrait remplacer partout où il apparait http://www.proinvention.com par https://www.proinvention.com (le "s" dans "https" est important).

Puisque les images se trouvent sur le même serveur que le site on peut même utiliser des chemins relatifs.

Et pour Loraga : il faut savoir que les guillemets ne sont pas obligatoires (ils le restent si l'URL comporte certains caractères spéciaux, comme par exemple une parenthèse fermante).

Ce qui donnerait donc :
background-image: url(/fond.png);


Tous les avatars de cette page de démonstration sont définis en chemins relatifs : exemple en ligne.
Modifié par Olivier C (31 Mar 2023 - 23:40)
Prévenir un modérateur
Répondre au sujet
Aller à