Diviser le second Background en 4 pour un chargement plus rapide

**couros** · 24/02/2012, 21h32

Bien le bonjour les amis, je suis tout nouveau ici j'espère ne pas aller à l'encontre des règles du forum.

Voici mon problème:
Sur ma "one page", j'ai une trame en BG de body et une autre image en bg_content.
seulement voila, le deuxieme bg mets trop de temps a se charger.

voici le code coté html

Code xhtml :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="849wWYbZtLidqABXinbBVmo07APl_6zEUi-RjiHoTZw" name="google-site-verification"/><!--est ce que je dois le laisser une fois le site verifier ?-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page_test</title>
<!--appel CSS-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
 
<!--contenu-->
<body onload="MM_preloadImages('images/bg_body.jpg','images/bg_content.png','images/tab1_hover.png','images/tab2_hover.png','images/tab3_hover.png','images/tab4_hover.png','images/tab5_hover.png','images/tab6_hover.png','images/webdesigner.png')">
 
	<div style="background-image:url(images/bg_content.png); overflow: hidden; background-repeat: no-repeat; width: 1395px; height: 1380px; margin: auto;">
		<div style="float:right; margin: 21px 112px 0 0;"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','images/webdesigner.png',1)"><img src="images/Antoine-ferre-txt.png" alt="Logo" name="Logo" width="252" height="169" border="0" id="Logo" /></a>
		</div>
			<div id="content">
				<div style="float:left; margin: 174px 0 0 27px"><img src="images/Main.gif" width="189" height="94" alt="Indication du clic"/>
			  </div>
				<div id="main">
				</div>
			</div>
  	</div>
 
</body>
</html>

Et coté CSS:

Code css :

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
38
39
40
41
42
43
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(../images/bg_body.jpg);
	background-repeat: repeat;
	background-color: #8c8261;
}
 
#bg_content {
	margin: auto;
	height: 1380px;
	width: 1395px;
}
 
#indication {
	float: left;
	height: 94px;
	width: 200px;
	margin-top: 24px;
	margin-left: -200px;
}
 
#content {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	height: 100%;
	width: 100%;
	margin-left: auto;
	background-image: url(../images/bg_content.png);
	background-repeat: no-repeat;
}
 
 
#main {
	font-family: georgia,serif;
    font-size: 13px;
    margin: 0 auto;
    position: relative;
    width: 940px;
}

Je voudrais que le Backrgound "images/bg_content.png" soit remplacé par les 4 images "bg_content.png";"bg_content2.png";"bg_content3.png" et "bg_content4.png" sans que ca me décalle tout le tout pour un soucis de chargement plus rapide de la page.

Les images se trouvent ici http://www.antoine-ferre.com/au_secour/images

Merci à toute personnes qui pourraient m'aider

**Muchos** · 25/02/2012, 05h47

Je n'y connais rien, mais ne serait-ce pas la technique des sprites CSS ?

Ce petit tuto pourrait te donner des pistes.

Invité · 25/02/2012, 09h41

Bonjour,
ton image bg_content.png fait 2,5 Mo !
Déjà, une image de cette taille en png est de la folie.

Crée la même image en jpg. Elle ne prendra "que" 200 ko.
Il suffit juste de fusionner avec l'image de fond (dans la partie transparente).

[edit] Tiens, voilà ton image (pièce jointe) : 215 ko.

**couros** · 25/02/2012, 19h01

Merci infiniment de vous êtres penché sur mon cas et pour vos réponses Muchos et Jreaux62.
J'ai pas bien compris où tu voulais en venir avec les sprites Muchos, mais ca me rappelle qu'il faut que je les utilise plus souvent.

Sinon Jreaux62, je sais bien que mon png est catastrophiquement lourd, j'avais bien pensé à ta solution mais je ne l'avais pas prise ni même essayé car je savais bien le rendu que cela ferait , a savoir une démarcation à l'endroit même où se termine l'image (encore plus flagrant si on change la taille de sa fenêtre).Ce que l'on a pas ici a l'état d'origine de mon problème avec le png.
Mais je me dis que si je descend l'image jusqu'en bas (cad de la même taille que le body) la démarcation ne se verra plus. ce serait un bon compromis pour garder l'image en .jpg même si je l'allourdi par une centaine de px de haut.

Il y'a aussi le fait de mettre une couleur unie et de laisser tomber ma trame du body, mais bon, dommage.

N’empêche que j'aurai bien été curieux de savoir s'il y'avait une solution autre que celle ci qui me permette de garder mon effet qui ne se démarque pas .

Toujours est il que je vous remercie encore pour votre aide, c'est appréciable.