28172 sujets

CSS et mise en forme, CSS3

Background image(s) !

Bonjour,

Alors en fait le problème est simple, j'ai 2-3 idées pour le résoudre, mais pas de solutions simples...
Le but du jeu est d'avoir un site web dont le background est composé de 2 images ; l'une complètement alignée horizontalement à gauche, et l'autre alignée complètement à droite, les deux étant centrée verticalement.

Je veux que ce soit "étirable" ! c'est à dire bien avec 2 images, l'une toujours à gauche, l'autre toujours à droite, et la distance les séparant évoluant en fonction de la taille de l'écran
Exemples avec un écran en 800px de large, et l'autre en 1600 pixels pour mieux comprendre :

http://www.itch.fr/maquette1.jpg
http://www.itch.fr/maquette2.jpg

Explication plus "graphique" :
http://www.itch.fr/maquette.jpg

<Modération: suppression des tags [ img ] et remplacement par des liens simples. Merci de ne pas placer d'images trop larges dans vos messages. On peut utiliser des liens à la place, ou bien des vignettes. />

Jusqu'ici la seule solution "viable" que je pense avoir trouvé est d'en mettre une sur le body, et une autre dans un div avec z-index 1 et height et width à 100%, le contenu du site se présentant donc dans un autre div avec un z-index de 2 ou plus... Pas très "propre" à mon goût... Sans parler du problème de chevauchement des 2 images pour nos chers amis visiteurs en 600px de large... mais là, à moins de passer par le png et donc de squizzer les IE6ternautes, ou de scripter du javascript un peu vilain, rendant le div de la deuxième image invisible (display:none si la largeur de l'écran de l'utilisateur est inférieure à la somme des largeurs des 2 images de fond... ou en bloquant ce div qui contient l'image de droite en position absolute avec une valeur de left égale à la largeur de l'image de gauche.

Bref tout ça c'est un peu "dégueu", alors peut-être que quelqu'un a une idée plus simple !

J'aimerai éviter d'avoir à faire ça en flash, ce qui malgré tout serait peut-être le plus simple ! (placer le fichier flash en fullscreen dans un div en arrière plan)

Merci d'avance !

(et puis si vous avez un avis esthétique sur le principe, n'hésitez pas !)
Modifié par Florent V. (23 Aug 2008 - 15:25)
du genre http://tfeserver.homeunix.org/test.html ?

comme je ne sais pas si l url marche, j explique Smiley smile

en gros tu peux faire 3 div
div.gauche, div.droite et div.centre avec

  .gauche
    {
	float:left;
	width:300px;
	background:url(http://www.oundleschoolhockey.org.uk/uploads/images/pupils/pingu[4].jpg) no-repeat left;
    }
    .droite
    {
	float:right;
	width:300px;
	background:url(http://www.oundleschoolhockey.org.uk/uploads/images/pupils/pingu[4].jpg) no-repeat right;
    
    }
    div.centre
    {
	padding-top:100px;
	text-align:center;
	font-size:30px;
	height:300px;
	background:blue;
    }


puis un code html du genre

<div class="gauche"></div>
<div class="droite"></div>
<div class="centre">CONTENU</div>

Modifié par tfe (23 Aug 2008 - 15:10)
tfe a écrit :
du genre http://tfeserver.homeunix.org/test.html ?


Qu'il est mignooon le pingouin !
Et oui, c'est -à peu près- ça ! Le seul problème que j'y vois, c'est que le contenu saute si la largeur de l'écran est égale à la largeur des 2 images, et les miennes feront presque 400px de large, donc ça laisse peu de place au contenu !!

Il faudrait que ça marche pareil, mais que le contenu soit de largeur fixe (jusque là fastoche) et puisse dépasser par dessus les div gauche et droite... Si je n'utilise pas float comme tu l'as fait mais que je positionne les deux div en absolute left:0 et right:0 chacun, en leur mettant un z-index inférieur au div contenu, ça passe partout ça ? IE6 va peut -être rien comprendre (encore) ?? aucune idée de la compatibilité de z-index...

Merci !
Bonjour,

Avec des images de fond sur des conteneurs globaux (genre l'élément BODY, pour commencer...), c'est mieux.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style>
	html {
		height: 100%;
	}
	body {
		margin: 0;
		padding: 0;
		height: 100%;
		background: url(gauche.jpg) no-repeat fixed left center;
	}
	#global {
		min-height: 100%;
		background: url(droite.jpg) no-repeat fixed right center;
	}
	#global div {
		width: 400px;
		height: 5000px;
		margin: 50px auto;
		background: red;
		opacity: .5;
	}
	</style>
</head>

<body>

<div id="global">
	<div></div>
</div><!-- #global -->

</body>
</html>

L'aspect «image fixe» marche pas des masses sous IE6 pour l'image de droite, par contre. RAS partout ailleurs.
Pas mieux que Florent, si ce n'est que dans ton cas particulier tu dois même pouvoir combiner tes deux images de fond en une seule et jouer sur le background-position pour la couper au milieu.

Ca t'économise un hit sur le serveur et te fera un fichier plus léger que deux cumulés.
Tymlis a écrit :
Ca t'économise un hit sur le serveur

Oui.

Tymlis a écrit :
et te fera un fichier plus léger que deux cumulés

Je pense que dans ce cas précis, non. En effet, il faudrait laisser un blanc énorme entre les deux images (car background-position ne permet pas de placer le bord droit d'une image de fond à par exemple -400px du bord droit de l'élément, ce qui aurait permis d'avoir une image unique avec une sphère plutôt que deux demi-sphères). Et ce blanc n'alourdira pas outre mesure l'image, mais ça restera sensiblement plus lourd.
Sujet clos
Aller à