Difficultés avec la propriété image-background en css

Question

timtim

29 Feb 2012 à 15:55

Salut !

Je suis déjà venu vers vous pour un problème (non résolu malheureusement), mais j'en ai encore un.

En fait, je souhaiterai savoir plusieurs choses.
Tout d'abord, pour placer une image en fond qui va se redimensionner selon le navigateur et la résolution de l'utilisateur, est-ce la propriété "image-background" est une bonne solution ?

Ce qui m'amène à ma deuxième question : comment utiliser cette propriété ? Smiley lol

J'ai tenté :
background-image:url (background.png);
background-image:url (/background.png);
background-image:url (../background.png);
background-image:url (../img/background.png);
background-image:url ('background.png');
background-image:url ('/background.png');
background-image:url ('../background.png');
background-image:url ('../img/background.png');

Je ne comprends pas ce qui ne va pas Smiley ohwell

Du coup voilà mon code CSS :

html {
    margin: 0;
    padding: 0;
    height: 100%
    }

body {
    margin: 0;
    padding: 0;
    height: 100%
    }

#splash {
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    height: 100%;
    width: auto;
    }

#splash img {
    height: 100%
    }

#center {
	background-position:center center;
	background-image:url (../img/background.png);
    margin:0;
	float:right;
    padding: 0;
    z-index: -2;
    text-align: center;
    max-height: 1080px;
    max-width: 1440px;
    }

#center img {
    height: 100%;
    }

footer {
    clear: both;
    text-align: center;
    margin: 0 auto;
    max-width: 1440px
    }

footer img {
    width: 100%
    }

nav {
    position: relative;
    float: left;
    z-index: 2
    }

ul.cat {
    list-style: none;
    display: block;
    position: relative;
    top: 250px;
    left: 200px
    }

li {
    margin: 20px 0 0 0
    }

nav ul.cat li a {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    padding: 7px 0 7px 0;
    width: 100px;
    display: block;
    text-decoration: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
    filter: alpha(opacity=40);
    behavior: url(/PIE.htc);
    }

nav ul.cat li a:hover {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    filter: alpha(opacity=100);
    behavior: url(/PIE.htc);
    }

nav ul img {
    float: right
    }

Et mon HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/galerie.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<nav>
<ul class="cat">
<li><a href="1.html"><img src="img/buttons/1.jpg" alt=""></a></li>
<li><a href="2.html"><img src="img/buttons/2.jpg" alt=""></a></li>
<li><a href="3.html"><img src="img/buttons/3.jpg" alt=""></a></li>
<li><a href="4.html"><img src="img/buttons/4.jpg" alt=""></a></li>
<li><a href="5.html"><img src="img/buttons/5.jpg" alt=""></a></li>
</ul>
</nav>

<div id="center"></div>

<section id="galerie">
<ul>
<li><a href="#"><img class='bgimg' src="img/carres/1_.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/2_.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/3_.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/4_.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/5_.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/6_.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/7_.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/8_.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/9_.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
</ul>
</section>

<footer><img src="img/footer.png" alt=""></footer>
</body>
</html>

J'espère que quelqu'un pourra m'aider.

Merci Smiley smile

Gothor

29 Feb 2012 à 16:03

Bonjour,

timtim a écrit :
Tout d'abord, pour placer une image en fond qui va se redimensionner selon le navigateur et la résolution de l'utilisateur, est-ce la propriété "image-background" est une bonne solution ?

Je crois que tu cherches ceci : http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

timtim a écrit :
Ce qui m'amène à ma deuxième question : comment utiliser cette propriété ?

background-image : url('chemin vers ton image');

Le chemin doit être donné par rapport à ton fichier css...

Imaginons la structure suivante:

- root
   + css
      + img
         + background.png
      + feuillesDeStyle
         + style.css
   + html
      + index.html
      + page2.html

Depuis style.css, pour accéder à ton image, tu peux faire :
./../img/background.png
../img/background.png
/css/img/background.png

./ = noeud actuel
../ = noeud parent

Victor BRITO

29 Feb 2012 à 16:07

Salut,

Le chemin vers l'image indiqué dans url() est le chemin relatif au fichier CSS comportant la déclaration CSS en question (ou à la page HTML comportant la déclaration CSS s'il ne s'agit pas d'une feuille de style externe).

Si tu souhaites que ton image d'arrière-plan puisse être redimensionnée quelle que soit la taille d'écran, la propriété CSS 3 background-size sera plus appropriée.

Édition : grille par Gothor pour les chemin relatifs.
Modifié par Victor BRITO (29 Feb 2012 - 16:08)

timtim

29 Feb 2012 à 16:38

Et bien merci beaucoup, cette fois ça a été super rapide pour réglé mon problème.

Etonnant que je n'ai pas vu passer cet article dans mon flux rss.

Un merci supplémentaire pour gothor qui m'a donné une excellente piste. Je ne cherchais pas exactement ça puisque mon image est en fait un gros logo en arrière plan, mais ça convient très bien pour l'instant. Il faudra que je teste sur des plus grandes résolutions que mon portable.

Tant qu'on y est, est-ce que quelqu'un sait comment faire pour centrer ma galerie d'image par rapport à cet arrière plan ? Vu que l'image de fond va se redimensionner selon les navigateurs, le logo en arrière plan ne sera plus centré par rapport à la galerie, savez-vous comment je pourrais faire ?

J'ouvrirai un nouveau sujet sinon.

Encore merci beaucoup Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Difficultés avec la propriété image-background en css