Div avec background dont la taille s'adapte à une image

**rednekk** · 27/08/2010, 15h37

Salut à tous !

Je voudrais faire une div qui a en background-repeat cette image :

( Bon, un peu dur à voir, c'est juste une image de 4 par 4px qui une fois répétée fait un fond hachuré, fin voilà. )

Voilà le code de la div :

Code :

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

1
2
3
4
5
6
7
8
9
 
#photo {
	width:auto;
	height:auto;
	margin:auto; (pour centrer la div)
	padding:10px;
	background-image:url(images/fondphotor.JPG);
	background-repeat:repeat;
}

Je voudrais que quelque soit l'image que cette div contient, celle-ci adapte sa taille et que le background se cale bien avec le padding comme il faut. Et evidement ca ne marche pas ! :/

La plupart de mes images sont en 660x460, donc avec mon padding de 10px ma div est normalement en 680x680 et ca passe nikel avec les images qui correspondent.

Quand je met les tailles de ma div en auto, c'est à peu près bon avec les images en 660x460 mais la div est un peu trop longue en dessous de l'image.

Comme ceci :

http://www.vincentleroux.fr/english/...epackaging.php

Par contre avec d'autres images en 432x460, la div dépasse complètement à droite comme ceci :

http://www.vincentleroux.fr/english/.../teddybear.php

Voilà !

Auriez vous une idée ?

Merci d'avance !

**sevian** · 27/08/2010, 16h32

donne nous le html qui va avec

**rednekk** · 27/08/2010, 17h57

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="http://www.vincentleroux.fr/style.css" type="text/css" />
	<script type="text/javascript" src="http://www.vincentleroux.fr/scriptmenu.js"></script>
	<script type="text/javascript" src="http://www.vincentleroux.fr/demo.js"></script>
	<title>Welcome on my online portfolio - Vincent Le Roux</title>
</head>
 
<body>
 
<div id="conteuneur1">
 
	<div id="conteuneur1-1">
 
    </div>
 
    <div id="spacer">    
    </div>
 
    <div id="conteuneur-menu">
 
<!-- MENU MENU MENU MENU MENU -->
 
<?php include('http://www.vincentleroux.fr/english/menu.php'); ?>
 
<!-- MENU MENU MENU MENU MENU -->
 
	</div>
 
 
	<div id="conteuneur-contenu">
 
        <div id="phototexte">
 
<!-- PHOTO PHOTO PHOTO PHOTO -->
 
			<div id="photo">
 
            <img src="http://www.vincentleroux.fr/images/product/baublepack1.jpg" />
 
            </div>
 
<!-- PHOTO PHOTO PHOTO PHOTO -->
 
 
<!-- TEXTE TEXTE TEXTE TEXTE -->
 
			<div id="texte">
 
 
            azazeazdazd az daz d
 
            </div>
 
<!-- TEXTE TEXTE TEXTE TEXTE -->
 
        </div>
 
    </div>
 
</div>
 
</body>
</html>

Div avec background dont la taille s'adapte à une image

CSS

Discussions similaires

Partager

Partager