L'alignement d'un background (css)
Résolu
Bobshit
Messages postés
12
Date d'inscription
Statut
Membre
Dernière intervention
-
Bobshit Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
Bobshit Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
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 :
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; }
A voir également:
- L'alignement d'un background (css)
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Starter background changer - Télécharger - Thèmes & Fonds d'écran
- John's background switcher - Télécharger - Suite bureautique
- Alignement tête d'impression canon pixma mg3650 - Forum Imprimante
- Enlever le soulignement d'un lien css ✓ - Forum Webmastering
7 réponses
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 :
Merci beaucoup pour ta patience et tes recherche godLike ;).
Bonne journée.
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.
Il ne faut pas la mettre dans un <div></div>
Fait plutôt ça :
Voilà , bonne journée.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.
Cela ne fonctionne toujours pas :(, je vous envoie le CSS complet :
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 :)
#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 :)