28234 sujets

CSS et mise en forme, CSS3

[resolu] Afficher une page sur un fond "étiré"

Bonjour,

J'ai suivi (autant que faire ce peux) les conseils que vous donnez pour obtenir une image étirée en fond d'ecran.

@charset "utf-8";

html,
body
{
	font-family: Verdana, Geneva, sans-serif;
	width: auto;
	font-size: 1em;
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	background-attachment: fixed;
}

#arriere_plan
{
	/* l'image occupe toute la place du body */
	width : 100%;
	height: 100%;
}

#container
{
	position:relative;
	top:auto;
	left:auto;
	border:solid 1px;
	width: 80%;
	min-width:800px;
	background-image: url(Medias/Design/degrade_vert.jpg);
	margin-right: auto;
	margin-left: auto;
	/**/
	list-style-image:url(Medias/Design/arrow.gif);
}


mais je n'arrive pas a positionner mon <div id="container"> dessus Smiley sweatdrop

voici le code html ...


<body id="top">
	<img id="arriere_plan" alt="" src="../Medias/Design/background.jpg" />
	<div id="container">
		<!--ancre de haut de page-->
		<a name="haut_de_page" id="haut_de_page">
		</a>
                ...


Je vous remercie de l'aide que vous voudrez bien m'apporter Smiley smile
Modifié par lmbbb (21 Jan 2010 - 20:51)
Merci beaucoup,

J'ai modifié le css en indiquant position:absolute; et en donnant des valeurs à top et left pour #container. Ca fonctionne. 

#container
{
	position:absolute;
	top:20px;
	left:10%;
	border:solid 1px;
	width: 80%;
	min-width:800px;
	background-image: url(Medias/Design/degrade_vert.jpg);
	margin-right: auto;
	margin-left: auto;
	/**/
	list-style-image:url(Medias/Design/arrow.gif);
}


Mais un nouveau pb. me saute dessus Smiley ohwell , est-il possible que l'image étirée servant de fond au container reste fixe lors du défilement de la page ?

Encore merci Smiley biggrin
lmbbb a écrit :
Mais un nouveau pb. me saute dessus Smiley ohwell , est-il possible que l'image étirée servant de fond au container reste fixe lors du défilement de la page ?
Éventuellement avec un position:fixed;
lmbbb a écrit :
Bonjour,

J'ai suivi (autant que faire ce peux) les conseils que vous donnez pour obtenir une image étirée en fond d'ecran.

@charset "utf-8";

html,
body
{
	font-family: Verdana, Geneva, sans-serif;
	width: auto;
	font-size: 1em;
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	background-attachment: fixed;
}

#arriere_plan
{
	/* l'image occupe toute la place du body */
	width : 100%;
	height: 100%;
}

#container
{
	position:relative;
	top:auto;
	left:auto;
	border:solid 1px;
	width: 80%;
	min-width:800px;
	background-image: url(Medias/Design/degrade_vert.jpg);
	margin-right: auto;
	margin-left: auto;
	/**/
	list-style-image:url(Medias/Design/arrow.gif);
}


mais je n'arrive pas a positionner mon <div id="container"> dessus Smiley sweatdrop

voici le code html ...


<body id="top">
	<img id="arriere_plan" alt="" src="../Medias/Design/background.jpg" />
	<div id="container">
		<!--ancre de haut de page-->
		<a name="haut_de_page" id="haut_de_page">
		</a>
                ...


Je vous remercie de l'aide que vous voudrez bien m'apporter Smiley smile

Modifié par lmbbb (21 Jan 2010 - 20:51)
Sujet clos
Aller à