28172 sujets

CSS et mise en forme, CSS3

Bonjour,
je travail actuellement sur la modification d'un wordpress mais je bloque sur une fonction CSS...
je souhaiterais mettre plusieurs images en arrière plan qui s'adapteraient à la largeur de l'écran.

http://ns23182.ovh.net/~wp_dsi (site en construction)

pour ce faire j'ai essayé ce type de fonctionnement:


#header_container{
	margin-top: 0px;
	position: relative;
	background:  url(http://ns23182.ovh.net/~wp_dsi/wp-content/themes/target/images/header_container.jpg) no-repeat center fixed;
	width: 100%;
}


c'est supère mon image s'adapte effectivement à la taille de mon écran, à condition d'avoir une fenêtre qui fait 150px de hauteur max.... sinon après elle descend et se dicimule derière la seconde image laissant une bande blanche à sa place...... pourtant avec le margin-top:0px; elle devrait rester en haut de l'écran, je n'y comprends rien Smiley bawling

pouvez-vous me donner un coup de main s'il vous plait ?
Modifié par Pagearo (30 Oct 2012 - 15:28)
Administrateur
Pagearo a écrit :
so good j'ai trouvé tout seul Smiley lol


Super !

Tu veux bien donner la solution pour les suivants qui auraient le même problème (et marquer ton sujet comme [résolu]) ?

Merci d'avance.
alors mon fond est composé de 3 images + du blanc donc voici comment j'ai fais pour gérer l'ensemble du background en sachant que mes images font 2560px de largeur histoire d'etre sur que ça s'adapte à toutes les résolutions d'écrans des différentes entreprises visées par le site


#header_container{
	margin-top: 0px;
	position: relative;
	background:  url(http://ns23182.ovh.net/~wp_dsi/wp-content/themes/target/images/header.jpg) no-repeat center;
	width: 100%;
}

#footer{
	margin: 0 auto;
	position: relative;
	background:  url(http://ns23182.ovh.net/~wp_dsi/wp-content/themes/target/images/bot.jpg) no-repeat center;
	background-position: bottom;
	width: 100%;
}

#home-container{
	margin: 0px auto;
	position: relative;
	padding: 0px 0px 25px 0px;
	background:  url(http://ns23182.ovh.net/~wp_dsi/wp-content/themes/target/images/home.jpg) no-repeat center;
	background-position: top;
	width: 100%;
}