Mettre deux images en background

Bonjour à tous ,

Je me suis penché récemment sur les css, et je trouve ça étonnamment costaud !

Cependant, j'ai un petit souci :

Je veux mettre 4 images en fond dans chaque coin de ma page (une pour chaque coin).

J'ai réussi à en mettre une en haut à droite et une en bas à droite en utilisant ce type de code :

body { 
	font: 75% georgia, sans-serif;
	line-height: 1.88889;
	background: #fff url(hautdroite.jpg) no-repeat top right; 
	margin: 0; 
	padding: 0;
	}
#contenu { 
	background: url(basdroite.jpg) no-repeat bottom right; 
	padding: 0 170px 0 50px;  
	margin: 0; 
	position: absolute;
	}

Pour celle en bas à droite, facile, je mets le même code mais dans mon tableau affichant le contenu de la page


Mais comment faire pour en mettre celles qui devraient venir à gauche ?

merci d'avance

Bonjour

Comme tu as sans doute pu le constater, on ne peut mettre qu'une image de fond par bloc. Cependant, ici tu aurais plusieurs solutions (les 2 que je vois):

1. Regrouper les 2 images du haut (gauche + droite) en une seule - mais ça dépend de leur poids à la sauvegarde, ça pourrait ne pas être recommandé.

2. Ajouter des div conteneurs supplémentaires superposés ~ mais ce n'est pas spécialement recommandé pour des raisons de sémantique, puisque ces divs n'auraient pas de contenu, à priori.

J'opterais pour la première solution personnellement. Cela dit, peut-être un lien vers ton layout / tes images pourrait aider à mieux visualiser!

Bienvenu sur le forum, il y a beaucoup d'exemples qui circulent sur le web pour construire les cadres arrondis, tu peux faire un tour sur le tuto d'alsacreations pour connaître les techniques principales, la largeur fixe et la largeur fluide.
Chaque technique est illustrée ici par un exemple:
- fixe chez Mozilla
- un exemple fluide (pas trouvé de site pro...)
Le fluide semble beaucoup moins utilisé que le fixe ce qui reste logique puisque le code doit être gonflé pour obtenir ce rendu, s'ajoutent des problèmes de compatibilité entre les navigateurs et le non respect de la séparation du code et du design.

a écrit :
Pour celle en bas à droite, facile, je mets le même code mais dans mon tableau affichant le contenu de la page

Attention à la construction du site dans un tableau, un rappel ici.

Corinne a écrit :
Bonjour


1. Regrouper les 2 images du haut (gauche + droite) en une seule - mais ça dépend de leur poids à la sauvegarde, ça pourrait ne pas être recommandé.

Tout d'abord, merci pour votre rapidité.

Le problème, c'est que je veux éviter qu'une barre de défilement horizontale apparaisse. Et dans ce cas, je ne peux regrouper en une seule image.

bonsoir

le lien proposé par mumblefoot : http://www.svay.com/coins_arrondis/coins_arrondis.html
convient bien .

Cependant , sans visualisé ce que tu recherche en final et sans la structure html de ta page , on ne pourra pas te proposé autre chose que des 'gabarits' .

Grosso-modo , tu as 4 coins en images a placé en arrière plan ou a casé en image décorative dans ton code html.

C'est a partir de ta page et de son contenu qu'il faut voir quel méthode (ou mélange de methode) serait le plus adapté.

Il n'y a pas une technique universelle

GC