# HTML et CSS: redimensionner une image d'arrière plan



## SnowMan (8 Février 2009)

Bonjour à tous,

Je cherche à afficher des informations sur une sorte de carte (carte=image d'arrière plan). J'ai donc écrit le code suivant:


```
<html>
<head>
    <title>Mon Document</title>

<style type="text/css">
.note{
    background:url("img/cartedd.png");
}

#exo1{
    width: 800px;
    height: 400px;
}
</style>

</head>

<body>
    <DIV id=exo1 Class=note >
    <H1>MON SUPER TEST</H1>
    <P>C'est un super blabla pour exemple</P>
    <P>Encore du blabla</P>
    </DIV>
</body>
</html>
```

L'image a les dimensions suivante: 1600*1040.
Je n'ai aucun problème pour la redimensionner si j'utilise une balise "img" avec le code suivant: "*<img width=455 height=296 src="img/cartedd">*"
Mais je n'arrive pas à la faire pour l'affichage sous forme de fond.


Voilà un exemple de ce que je cherche à faire: http://apptrap.softonic.fr/mac
(voir la carte intitulée "_*L'avis de la rédaction*_")


Que faire?

Merci pour votre aide


----------



## koeklin (9 Février 2009)

je pense que tu parles de cette image
en fait, il n'y a pas de redimensionnement , il doit s'agir d'un jeu de positionnement de l'image en arrière-plan :
En fait tu dois  avoir deux parties:  

une div qui t'affiche la partie haute de l'arrière-plan ( son entête bleu clair et la partie blanche bordé des cotés bleus) et 
une div inférieure qui t'affiche seulement la partie inférieure de la même image .
Ces deux div sont très nettement plus petites que l'image d'arriere-plan






En tant que visiteur du site tu ne vois pas  quand tu passes de l'une à l'autre tu vois un seul bloc  homogène "L'avis de la rédaction" 
mais le résultat est qu'en fonction de l'importance du  contenu des deux parties t'as l'impression de voir le background s'allonger en hauteur ou se raccourcir selon les pages. Et pourtant il n'y a aucun redimensionnement, par ex.  l'entête bleu-pale a toujours la même hauteur.

ça se trouve je me goure complètement sur les détails mais je ne pense pas tant que ça sur le principe...


----------



## momo-fr (9 Février 2009)

C'est exactement le principe décrit par *koeklin*, il te suffit de prévoir ton image en grand, de positionner dans la <div> conteneur globale le fond en position top/left et la même chose pour le dernier élément dans le conteneur (dans l'exemple c'est l'ul de la dernière liste qui affiche le bas du bloc) avec en background la même image mais placée en bottom/left.

Simple jeu de CSS, perso je découpe pour alléger encore plus les fichiers mais dans l'exemple le fond est très simple. 

Maintenant si ton problème vient de la taille de ton image, tu dois la redimentionner aux dimensions voulues avant de l'utiliser en background... au passage tu vas réduire son poid.


----------



## Anonyme (9 Février 2009)

C'est exactement ça.  Si tu veux encore plus d'info.


----------



## momo-fr (9 Février 2009)

Gloup Gloup


----------



## Anonyme (9 Février 2009)

Le reste du site est très intéressant également


----------



## koeklin (9 Février 2009)

oui, je vois ça.
 merci


----------



## SnowMan (9 Février 2009)

Merci pour vos explications claires et précises 

J'ai donc 2 solutions:
1) Mode fainéant: on redimensionne l'image avec photoshop
2) Mode curieux: adaptation de deux <div>

Je commence par la 2, ca m'aidera à m'améliorer en codage!


----------



## SnowMan (9 Février 2009)

Bah en fait, c'était plus simple que ce que je pensais...


```
<html>
<head>
    <title>Mon Document</title>

<style type="text/css">
.fond_haut {
    background:url("img/carted.png") no-repeat top;
    }

.fond_bas {
    background:url("img/carted.png") no-repeat bottom;
    }

#taille_div {
    width: 800px;
    height: 200px;
    }
    
</style>

</head>

<body>

    <div id="taille_div" class="fond_haut">

    </div>
    
    
    <div id="taille_div" class="fond_bas">

    </div>
    
</body>
</html>
```


----------



## Anonyme (9 Février 2009)

N'oublie pas le doctype* sinon tu vas avoir des différences de rendu avec IE. 

Tu peux aussi intsaller l'extension firebug dans firefox, comme ça tu verras le poids de tes pages (100Ko-150Ko maximum) et plein d'autres choses encore&#8230;


*Le xhtml strict 1.0 est très bien


----------



## SnowMan (9 Février 2009)

gloup gloup a dit:


> N'oublie pas le doctype* sinon tu vas avoir des différences de rendu avec IE.
> 
> Tu peux aussi intsaller l'extension firebug dans firefox, comme ça tu verras le poids de tes pages (100Ko-150Ko maximum) et plein d'autres choses encore
> 
> ...


Ok.

Et merci pour tes 2 liens, je les garde, ils m'ont l'air bien utiles ces sites!


----------



## Anonyme (10 Février 2009)

Oui, sur alsacreations il y a même des cours pour les débutants


----------

