28172 sujets

CSS et mise en forme, CSS3

Background ajustable fenêtre avec hauteur auto

Bonjour à tous,

Je veux sur mon site : http://www.guillaumelanier.com/index.php , avoir un fond (en l'occurrence les 2 ombres sur les côtés) qui puissent s'ajuster à la fenêtre des 2 côtés.

Pour ça j'ai fait :


<body>

<div id="bord_left"></div>
<div id="bord_right"></div>

    <div id="top-head">
        <div id="head">
            <a href="index.php" class="logo" title="I am a web designer"></a>
            <div class="nav">
                <ul id="navigation">
                    <li class="About"><a href="#about">About</a></li>
                    <li class="Work"><a href="#portfolio">Work</a></li>
                    <li class="Contact"><a href="#get-in-touch">Contact</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div id="sub-head"><div class="centrage"><img src="inc/common/Start.gif" alt="start" /></div></div>
       </div>
...


avec le css qui nous interesse :


#bord_left {
    background: url(fond_left.png) repeat-y scroll left top;
    height:2000px;
    left:0;
    position:absolute;
    top:100;
    width:159px;
    margin-top:100px;    
}

#bord_right {
    background: url(fond_right.png) repeat-y scroll left top;
    height:2000px;
    right:0;
    position:absolute;
    top:100;
    width:159px;
    margin-top:100px;    
}


J'ai donc été contraint pour que ça marche un minimum de mettre une taille définie height : 2000px. J'aimerai plutôt que le fond s'ajuste automatiquement à la hauteur de la page, sauf que cela ne marche pas avec height : auto.

Merci d'avance de m'aider à régler ce petit prob qui m'empêche de dormir depuis maintenant plusieurs jours.
Modifié par Guilanier (11 Oct 2010 - 23:17)
Bonjour,

Tu peux les mettre en position fixe :
#bord_left { 
	background: url(fond_left.png) repeat-y scroll left top; 
	position:fixed; 
	left:0; 
	top:0;
	bottom:0;
	width:159px; 	 
}  
#bord_right { 
	background: url(fond_right.png) repeat-y scroll left top; 
	position:fixed; 
	right:0; 
	top:0;
	bottom:0;
	width:159px; 	    
}

Inconvénient : les ombres seront visibles dans l'espace qui se trouve au dessus de ton entête.
Si c'est gênant, tu pourras les masquer en superposant un bloc avec un fond de la même couleur que ton body.
Une bonne solution que vient de te fournir ellm.

Il y a peut-être ceci aussi : Pour obtenir un effet semblable en arrière-plan et sans div… Un coté de dégradé en arrière plan HTML (prendra hauteur écran plein pot) et l'autre coté placé en BODY (hauteur selon contenu) :

html, body { margin:0;padding:0}
html {
background: url(fond_left.png) repeat-y left top; }
body {
background: url(fond_right.png) repeat-y right top; }

Ça devrait faire quelque chose du même genre. Sauf si le contenu du body est moins grand que l'écran : CQFD
Effectivement cette solution marche aussi, mais une préférence quand même pour la précédente car elle permet aux ombres de passer au dessus des éléments du container (pour le cas d'un 1024) sans avoir à trop toucher au CSS.

Merci à vous 2.
Sujet clos
Aller à