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:

Bloc de code:

<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. :zen:

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.
:zen:

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...

Bloc de code:

<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…

*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

*Le xhtml strict 1.0 est très bien

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

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

SnowMan

Membre confirmé

koeklin

Membre expert

momo-fr

Ancien Aveyronnais

Anonyme

Invité

momo-fr

Ancien Aveyronnais

Anonyme

Invité

koeklin

Membre expert

SnowMan

Membre confirmé

SnowMan

Membre confirmé

Anonyme

Invité

SnowMan

Membre confirmé

Anonyme

Invité

Sujets similaires