L'alignement d'un background (css)

Résolu/Fermé
Bobshit
Messages postés
12
Date d'inscription
lundi 2 novembre 2009
Statut
Membre
Dernière intervention
30 mai 2011
- 16 nov. 2009 à 08:34
Bobshit
Messages postés
12
Date d'inscription
lundi 2 novembre 2009
Statut
Membre
Dernière intervention
30 mai 2011
- 16 nov. 2009 à 11:04
Bonjour à tous,

Je rencontre un problème actuellement, j'ai une image que je désires centrer au milieu de ma page web, et qu'elle se situe tout en haut du site et non au centre (c'est une image background).

En ce moment, l'image se situe au centre au niveau Vertical et Horizontal.

Voici mon code :

#cadre_general
{
	width: 1024px;
	height: 768px;
	font-family: Times New Roman;
}

#cadre_back
{
  	height: 1024px;
  	background-image:url(image/background.jpg);
  	background-attachment: fixed;
  	background-position : center;
  	background-repeat: no-repeat;
  	float: top;
}

7 réponses

Bobshit
Messages postés
12
Date d'inscription
lundi 2 novembre 2009
Statut
Membre
Dernière intervention
30 mai 2011
1
16 nov. 2009 à 11:04
Problème résolu, on continuant de chercher sur des sites je suis tombé sur le "background-position" que j'utilisais déjà. Mais apparemment on délimite la position vertical et horizontal avec cette balise.

Donc cela donne :
#cadre_back
{
  	background-image:url(image/background.jpg);
  	background-attachment: fixed;
  	background-position : center top;
  	background-repeat: no-repeat;
  	height: 1024px;
}


Merci beaucoup pour ta patience et tes recherche godLike ;).
Bonne journée.
1
godLike
Messages postés
259
Date d'inscription
mercredi 4 mars 2009
Statut
Membre
Dernière intervention
26 juillet 2011
26
16 nov. 2009 à 08:48
Il ne faut pas la mettre dans un <div></div>

Fait plutôt ça :

body
{
  	height: 1024px;
  	background-image:url(image/background.jpg);
  	background-attachment: fixed;
  	background-position : center;
  	background-repeat: no-repeat;
  	float: top;
}


Voilà , bonne journée.
0
Bobshit
Messages postés
12
Date d'inscription
lundi 2 novembre 2009
Statut
Membre
Dernière intervention
30 mai 2011
1
16 nov. 2009 à 09:55
Euh non cela me donne toujours la même chose :(
0
godLike
Messages postés
259
Date d'inscription
mercredi 4 mars 2009
Statut
Membre
Dernière intervention
26 juillet 2011
26
16 nov. 2009 à 10:16
Essaye de mettre :

align:top;

dans les propriétés CSS du body .
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Bobshit
Messages postés
12
Date d'inscription
lundi 2 novembre 2009
Statut
Membre
Dernière intervention
30 mai 2011
1
16 nov. 2009 à 10:35
Non toujours pas,

align: top;

N'est apparemment pas une balise correcte...
0
godLike
Messages postés
259
Date d'inscription
mercredi 4 mars 2009
Statut
Membre
Dernière intervention
26 juillet 2011
26
16 nov. 2009 à 10:43
Au temps pour moi , en fait c'est :

align="top" qui est à mettre dans un <div></div>, donc essaie de faire un <div></div> pour ton en-tête avec align="top" dedans, du genre :



<div id="header" align="top">
----------------------------------
----------------------------------
</div>

Et dans ton CSS tu entre les propriétés de ton div

#header{
-----
-----
}

Voilà :) en espérant que ca marche.
0
Bobshit
Messages postés
12
Date d'inscription
lundi 2 novembre 2009
Statut
Membre
Dernière intervention
30 mai 2011
1
16 nov. 2009 à 10:57
Cela ne fonctionne toujours pas :(, je vous envoie le CSS complet :

#cadre_general
{
	width: 1024px;
	height: 768px;
	font-family: Times New Roman;
	color: white;
}

#Header
{
  width: 100%;
  height: 30%;
  float: top;
}

#Gauche
{
	width: 20%;
	height: 70%;
	margin-top: 0%;
	text-align: center;
	float: left;
}

#cadre_back
{
  	background-image:url(image/background.jpg);
  	background-attachment: fixed;
  	background-position : center;
  	background-repeat: no-repeat;
  	height: 1024px;
}

#Content
{
	width: 80%;
	height: 70%;
	margin-top: 0%;
	text-align: left;
	float: right;
	overflow: auto;
}

body
{
    background-color: #000000;
}


L'ordre des <div> dans les pages web sont :
- body
- cadre_back
- cadre_general
- Header
- Gauche
- Content

Voila en espérant que ça ai pu vous aider :)
0