28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mon deuxième background ne s'affiche pas

bonjour,

dans ma feuille de style css:

- html {background url(images/1.png) no-repeat center fixed;}
- body {background url(images/2.png) no-repeat center fixed;}

1.png est un fond de 2000x1500px,
2.png est un logo de 1500x200,

à savoir, le code fonctionne bien, car lorsque je déconnecte le css du html, le body 2.png s'affiche correctement.

le tout s'affichait très bien, mais plus maintenant. Je ne comprends pas pourquoi, d'autant que j'ai bien appliqué les tuto d'alsacréations.
j'ai tenté d'appliquer un z-index 1 et 2, mais cela ne change rien. J'ai contrôlé les chemins, les noms, la ponctuation, tout est ok.

Avez-vous une idée à creuser pour solutionner cela? Smiley sweatdrop
Bonjour,
html {background url(images/1.png) no-repeat center fixed;}
body {background url(images/2.png) no-repeat center fixed;}
Il manque les deux-points ? =D
Sinon, tu n'as pas de page exemple en ligne ?
oui, j'ai oublié les 2 points ici, mais pas dans mon css (tu m'as fait peur Smiley cligne )

et non, malheureusement je n'ai encore rien en ligne. Je peux mettre le code de base ici si cela est utile... 


<!DOCTYPE html> 
<html lang="fr">
	
	
	<head>
		<meta charset="utf-8"/>
		<meta name="Autor" content="#"/>
		<meta name="Description" content="#"/>
		<meta name="Keywords" content="#"/>
		<meta name="Indentifier-URL" content="#"/>
		<meta name="Copyright" content="#"/>
		<meta name="Generator" content="Gimp 2, Notepad++ 5, Safari 5"/>
		<meta name="Date" content="#"/>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<meta http-equiv="Refresh" content="60"/> <!-- ne fonctionne pas sans ajax-->
		<meta name="Robots" content="all"/>
		<link rel="stylesheet" href="1_menu.css"/>
		<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
		<script type="text/javascript"></script> <!-- $("#bloc_page").fitText(1); pour l'ajustement de tout par rapport à																la résolution, fonctionne pas-->
			
		

		
		<!-- pour la police Xirod -->
			<!--
				/* @license
				* MyFonts Webfont Build 
				* 
				* The fonts listed in this notice are subject to the End User License
				* Agreement(s) entered into by the website owner. All other parties are 
				* explicitly restricted from using the Licensed Webfonts(s).
				* 
				* You may obtain a valid license at the URLs below.
				* 
				* Webfont: Xirod by Larabie
				* URL:  http://www.myfonts.com/fonts/larabie/xirod/xirod/
 
				* Copyright: (c) 2004 Ray Larabie. See attached license agreement for more information. If EULA is missing, visit  www.larabiefonts.com  for an updated version of this font.
				* Licensed pageviews: unlimited
				* 
				* 
				* License:  http://www.myfonts.com/viewlicense?type=web&buildid=
 
				* 
				* © 2012 Bitstream Inc
				*/
			-->
			
		<!-- pour les bases structurantes html5 -->
			<!--[if lte IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<![endif]-->
			
		<!-- pour les inline-block -->
			<!--[if lte IE 8]>
			<link rel="stylesheet" href="1_menu_pour_IE.css"/>
			<![endif]-->
		
		<title>#</title>
	</head>
	
	
	<body>



</body>
</html>


reste plus qu'à ajouter une image 1 et 2 de ton choix dans le css.
quoique je peux aussi mettre le css pour ces balises si nécessaire ?
Effectivement, ça ne semble pas fonctionner...
Tu peux créer un élément div pour mettre ton background dedans ou bien utiliser le css3 et le multi-background.
Gothor a écrit :
Effectivement, ça ne semble pas fonctionner...
Tu peux créer un élément div pour mettre ton background dedans ou bien utiliser le css3 et le multi-background.


J'avais déjà tenté le mult-background, sans résultat positif pour cette balise "body".
Il existe également une div#bloc_page juste après body, dans laquelle je pourrais effectivement tenté d'insérer mon 2ème background.

Cependant, je m'aperçois ce jour, que ce sont TOUTES les "instructions" css sous "body" qui ne fonctionnent pas.

J'aimerais vraiment comprendre pourquoi? Smiley confus 


<html>
<head>
</head>
<body>
<div#bloc_page>
</div>
</body>
</html>




html
{
margin: 0;
padding: 0;
background: url(image_1.png) no-repeat center fixed;
background-size: cover;
}
body
{
background: url(image_2.png) no-repeat center fixed;
font-size: 0.7em;
color: red;
font-family: "Courier New", "Sans serif";
}
div#bloc_page
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: auto;
}
J'ai trouvé. C'est la position absolute de la div "bloc_page" qui empêchait de faire fonctionner le body.
Merci quand même Gothor.
Attention tu as 2 meta charset différentes dans le head.
Modifié par Kaelig (06 Apr 2012 - 19:23)
Sujet clos
Aller à