High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

L'alignement d'un background (css)

Dernière réponse le 16 nov 2009 à 11:04:41 Bobshit, le 16 nov 2009 à 08:34:44 
 Signaler ce message aux modérateurs

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;
}

Meilleures réponses pour « L'alignement d'un background (css) » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
[CSS] Créer facilement des CSS VoirUn outil très facile d'utilisation pour créer des CSS, avec un aperçu en direct de ce que vous créez : TopStyle. La version Lite est gratuite. www.topstyle4.com
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...
Posez votre question Répondre

1

godLike, le 16 nov 2009 à 08:48:25

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.
On peut tromper 1 fois 1000 personnes, mais on ne peut pas tromper 1000 fois 1 personne.

   
Répondre à godLike

2

Bobshit, le 16 nov 2009 à 09:55:44

Euh non cela me donne toujours la même chose :(

   
Répondre à Bobshit

3

godLike, le 16 nov 2009 à 10:16:21

Essaye de mettre :

align:top;

dans les propriétés CSS du body . On peut tromper 1 fois 1000 personnes, mais on ne peut pas t­romper 1000 fois 1 personne.

   
Répondre à godLike

4

Bobshit, le 16 nov 2009 à 10:35:52

Non toujours pas, 

align: top;

N'est apparemment pas une balise correcte...

   
Répondre à Bobshit

5

godLike, le 16 nov 2009 à 10:43:23

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. On peut tromper 1 fois 1000 personnes, mais on ne peut pas tromper 1000 fois 1 personne.

   
Répondre à godLike

6

Bobshit, le 16 nov 2009 à 10:57:46

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 :)

   
Répondre à Bobshit

7

 Bobshit, le 16 nov 2009 à 11:04:41

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.

   
Répondre à Bobshit
Posez votre question Répondre
Ils ont besoin de votre aide