28172 sujets

CSS et mise en forme, CSS3

Images differente celon la page

Bonjour,

Je suis en train de crée un site internet contenant plusieurs pages avec HTML et une feuille de style.
Cependant j'aimerais inserer une image de fond dans mes pages mais une differente pour chaque page. Seulment j'aimerais aussi eviter de cree une feuille de style pour chaque page juste pour une image dans background-image qui differe.
Est-il possible de specialiser graçe au css par exemple en specifiant par le CSS que la page Badminton affiche l'image Badminton?
Bonjour,

Il suffit d'avoir un code HTML indiquant quel style ou souhaite utiliser. Ça peut se faire par exemple avec un attribut id.

<body id="badminton">
...
</body>

Côté CSS, il ne reste plus qu'à utiliser le sélecteur body#badminton {...} ou body#badminton quelquechose {...}.
Merci pour ta reponse Smiley cligne sa marche tres bien par contre j'ai un petit probleme.
J'aimerai faire un effet de transparence sur l'image ces possible avec les proprieter de Background?
Oui mais non Smiley cligne ... mettre de l'opacité sur le body n'est pas une bonne chose Smiley ohwell .

Plutôt prévoir ça avec une image au format PNG. Smiley smile
Je le met en tant que paramettre de background comme ceci:
div#contenuSalsa
{	
	margin-top: 50px;
	padding: 0 10px 0 100px ;
	background: url(../images/salsa.jpg) no-repeat center filter:alpha(opacity=40) -moz-opacity:.4 opacity:.4;
}

Car cela n'affiche rien pour l'instant
a écrit :
Je le met en tant que paramettre de background ...


Non. Smiley ohwell

filter, -moz-opacity, opacity sont des propriétés à part entière (tout comme background). Smiley cligne
Modifié par yodaswii (11 May 2008 - 14:39)
comme ceci?

div#contenuSalsa
{	
	margin-top: 50px;
	padding: 0 10px 0 100px ;
	background: url(../images/salsa.jpg) no-repeat center;
	filter: alpha(opacity=40);
	-moz-opacity: .4;
	opacity: .4;
}


C'est bizare il ne les reconnais pas come background (il le met pas en bleu)
a écrit :
C'est bizare il ne les reconnais pas come background (il le met pas en bleu)


"opacity" est une propriété de la spécification 3 des CSS.
"filter" est une propriété CSS propre à IE.
"-moz-opacity" est une propriété CSS propre aux navigateurs basés sur un moteur Gecko (Mozilla Firefox notamment).

Il est donc (fort) probable que ton éditeur ne reconnait pas ces propriétés. Smiley cligne
yodaswii a écrit :
...blabla... sont des propriétés apparentières (tout comme background). Smiley cligne


Je l'aime bien celle-là Smiley lol Smiley cligne
a écrit :
Je l'aime bien celle-là Smiley lol Smiley cligne


Et oui même les meilleurs font des fautes d'orthographe (c'est le problème du premier jet hein Smiley cligne ). Smiley lol
(Par contre, c'est pas sympa de le faire remarquer. Smiley cligne )

<edit>C'est corrigé ... le "celon" n'est pas mal non plus ... hein 6l20 ? Smiley biggol </edit>
Modifié par yodaswii (11 May 2008 - 14:44)
D'accord mais l'image reste tjr aussi net. L'opacite ne marche toujours pas, je suis sur IE7.
Heu... on n'a pas dit plus haut que ce n'était pas une bonne idée d'appliquer l'opacité au bloc complet? (Bon, on a parlé de body et pas de div#contenuSalsa, mais si div#contenuSalsa n'est pas juste un élément de décoration mais bien un conteneur regroupant d'autres éléments, du texte, etc., lui appliquer opacity (et les propriétés «équivalentes») est une bêtise.

Solutions:
- soit utiliser une image en PNG-32 (avec couche alpha) comme image de fond;
- soit utiliser une image opaque mais avec le rendu souhaité (à voir selon le design).

Il se pourrait qu'il n'y ait pas de solution réellement satisfaisante. Le PNG-32 c'est bien, mais pour certaines images ça risque d'être trop lourd. Ça dépend donc du design à intégrer (dont on n'a rien vu pour l'instant, donc difficile de donner le moindre conseil valable...).
<hs>
yodaswii a écrit :

Et oui même les meilleurs font des fautes d'orthographe (c'est le problème du premier jet hein Smiley cligne ). Smiley lol
(Par contre, c'est pas sympa de le faire remarquer. Smiley cligne )
<edit>C'est corrigé ... le "celon" n'est pas mal non plus ... hein 6l20 ? Smiley biggol </edit>

Je te rassure, nous faisons tous des fôtes d'ortograffes (par manque d'attention, de connaissance, etc...) moi le premier Smiley cligne
Je ne passe pas mon temps à relever et à faire remarquer ces fautes, mais certaines me font sourire (la tienne par exemple) n'y vois surtout pas de méchanceté Smiley cligne

</hs>
a écrit :
... n'y vois surtout pas de méchanceté Smiley cligne

Je te rassure je ne l'ai pas pris comme ça.

Pour revenir au sujet :

a écrit :
dont on n'a rien vu pour l'instant, donc difficile de donner le moindre conseil valable...


+1. Smiley smile Est-il possible d'avoir un aperçu du design à intégrer ?
Oui bien sur merci de m'aider, je precise que le div contient après des balises textes ainsi que des balise de liens. Voici l'image:

upload/16647-salsa.jpg
Bonjour,

Tu peux transformer cette image en PNG-32 avec opacité à 20% ou 40% ou autre valeur de ton choix en utilisant un logiciel de graphisme qui va bien (Photoshop, Gimp, etc.). Cependant, je suspecte que cette image enregistrée en PNG-32 sera très lourde, de l'ordre de 250 Ko, ce qui est bien trop (déjà qu'elle n'est pas correctement optimisée en JPEG...).

Une solution possible serait de travailler avec un élément DIV (ou SPAN, c'est pas très important) vide, positionné en absolu, qui afficherait cette image de fond et pour lequel on utiliserait opacity. Ensuite, on afficherait le contenu réel par dessus. C'est peut-être jouable, ça va dépendre du design exact.

Mais sinon j'aurais une solution plus simple: ne pas placer cette image en fond, même avec une faible opacité. En général ce genre de chose ça fait des designs plutôt foireux, ça diminue la lisibilité (quand ça ne rend pas le contenu illisible), et ça n'apporte rien. Si l'image est si importante, la placer en en-tête (peut-être dans un format un peu plus petit) ne serait pas idiot. Mais par pitié, attention aux images de fond et à la lisibilité des contenus!
Sujet clos
Aller à