background affiché 100%

**la_lvlouche** · 03/03/2011, 21h22

Bonsoir tout le monde,
Voila je suis dans le cas ou mon background est une image en PNG avec une resolution de 2880*1800 et ma resolution d'ecran est 1440*900.
J'aimerai que cette image soit dans le fond du site... en entiere et peu importe la resolution de l'ecran de l'utilisateur...
J'ai essayé ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
body{
			width: 100%;
			height: 100%;
			margin: 0;
			background:url('Images/fond.png');
                        background-repeat:no-repeat;
			background-attachment:fixed;
		}

Mais je ne sais pas comment faire pour faire qu'il s'affiche a 100%
Merci d'avance

**Erwan31** · 04/03/2011, 00h14

Bonsoir,
primo, faire attention à ce que l'image en question ne dépasse pas un certain poids, son téléchargement risque de fortement ralentir l'affiche du contenu de la page (sauf cas particulier) et je doute qu'un png aussi grand ait un poids suffisamment faible.
Si tu n'as pas d'autre choix, je te conseil de placer l'image avant la fermeture du dernier bloc (une div en générale) pour que le contenu qui précède puisse s'afficher avant que l'image se soit chargée.

Donc
1 - réduire au maximum le poids de l'image quitte à la passer en JPEG
2 - un background CSS ne pouvant être redimensionné, il faudra passer par une image HTML avec ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
html > body img { /*sauf IE6 qui n'implémente pas max-width*/
	max-width: 100%; 
	height: auto;
	}

ou peut-être

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
html, body {height: 100%}
html > body img { /*sauf IE6 qui n'implémente pas max-width*/
	max-width: 100%; 
	height: 100%;
	}

Et passer tout le contenu en position absolu pour qu'il puisse s'afficher au dessus, mais à tester...

**la_lvlouche** · 04/03/2011, 15h22

Je ne comprend pas bien tes parties de code.
Cela doit apparaitre dans la partie css non?
Puis je ne connais pas le :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

html > body img {

Merci de bien vouloir m'eguiller à nouveau.

**rivsc** · 04/03/2011, 17h04

Voici une solution CSS 3 qui utilise border image :

http://blog.escarworld.com/post/2011...8html-/-css%29

Le problème comme d'habitude ce sont les vieux navigateurs !

**la_lvlouche** · 04/03/2011, 17h54

Je te remercie beaucoup pour ta réponse.
Malheureusement je ne sais pas pour quelle raison, mais chez moi ca ne marche pas!
Voila mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<html>
<head>
		<style type="text/css">
 
		html{
			width: 100%;
			height: 100%;
			margin: 0;
		}
		body{
			background-color:transparent;
			border: solid transparent;
			border-width:1px 1px 1px 1px;
			-o-border-image: url('Images/fond1440900.png') 1 1 1 1 stretch;
			-ms-border-image: url('Image/fond1440900.png') 1 1 1 1 stretch;
			-webkit-border-image: url('Image/fond1440900.png') 1 1 1 1 stretch;
			border-image: url('Image/fond1440900.png') 1 1 1 1 stretch;
		}
 
 
		#text{background-color:blue;float:left;}
 
 
		.avant{
		  width:30.0%;
		  height: 30.0%;
		  position: fixed;
		  left: 35.0%;
		  top: 35.0%;
		}
		</style>
	</head>
	<body>
			<div id="text" class="avant"></div>		
	</body>
</html>

Le carré bleu s'affiche devant un fond blanc...

**rivsc** · 04/03/2011, 18h07

La page de demo : http://blog.escarworld.com/public/teststretch.html fonctionne chez toi ?

Quel navigateur, quelle version ?

background affiché 100%

CSS

Vue hybride

Discussions similaires

Partager

Partager