Css redimensionner background-image

**altair8080** · 27/08/2010, 12h13

Bonjour,
je veux mettre un logo en haut à droite suivi d'un bandeau.
Là j'insère le background image mais celle ci est trop grande et je voudrais pouvoir la redimensionner sinon je ne vois pas l'image.

Comment faire, sachant que le height et width de la DIV concerne la dimension de la DIV.

Ensuite je devrais remonter le bandeau pour qu'il se trouve sur la même ligne mais à droite du logo.

Merci de aide car j'ai essayé différentes manière, mais cela ne fonctionne toujours pas.

index.html

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
 
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Titre</title>
</head>
 
<body>
  <div id="entete">
       <div id="logo">
      </div>
      <div id="bandeau">
      bandeau
      </div>
      <div id="menu">
      </div>
  </div>
</body>
</html>

style.css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
body {
  background: #FFFFDD;
  margin: 0;
}
 
 
#logo {
  float: left;
  width: 250px;
  height: 150px;
  background-image: url("image.jpg");
}

**c_s_s** · 27/08/2010, 12h46

Bonjour,

Pourquoi ne pas tout simplement utiliser la balise html <img> dans ton bloc logo ? Tu pourras ainsi lui donner les dimensions souhaitées.

**altair8080** · 27/08/2010, 13h30

L'image doit être dans le CSS, afin de pouvoir modifier le visuel plus facilement.
Là j'ai fait un exemple sur le code HTML mais en fait il est découpé en morceau pour intégration avec le code php et autre

**tigunn** · 28/08/2010, 18h49

Salut,
je crois pas qu'il y ait de solution permettant de faire cela. Mais d'autres solutions existent et notamment celle de tester la résolution cliente et d'afficher l'image de taille correspondante (nécessite plusieurs copies de la même image mais de différentes taille).
Exemple (dans le header):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Affichage de la page Index selon la résolution cliente -->
	<script type="text/javascript">
    	hauteur = screen.height;
	    largeur= screen.width;
	    // resol = largeur+ " x " + hauteur;
	    // alert(resol);
 
	    if (largeur<1024) {
	    	window.location.replace("./index_small.php");
	    }
	    if (largeur>1024) {
	    	//window.location.replace("./index_large.php");
	    }</script>