2009-12-09 7 views
0

image d'un site avec une bannière de hauteur variable en haut d'une page,largeur Auto div fond + de défilement vertical

En dessous, div#wrapper-inside intérieur div#wrapper
#wrapper-inside est de largeur fixe et centrée
#wrapper a une big background-image

Maintenant. Lorsque la largeur de la fenêtre d'affichage du navigateur est inférieure à celle de notre #wrapper-inside, nous obtenons une barre de défilement horizontale et lorsque vous faites défiler vers la gauche, vous remarquez que la largeur de #wrapper reste la même que la largeur de la fenêtre du navigateur.

Le problème est que #wrapper défile et l'image d'arrière-plan est coupée.

Est-ce que cela peut être corrigé avec css seul, sinon, jQuery?

Répondre

1

Que diriez-vous de régler #wrapper min-largeur à la même largeur fixe que le wrapper-inside.

+0

fonctionne comme un charme. Merci! Les utilisateurs d'IE6 reçoivent déjà un gros avertissement de mise à jour, donc pour les consulter. – thomasdecrick

0

il peut être fait avec seulement css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <style> 
      #wrapper { 
       overflow: auto; 
       background-image: url('http://fc05.deviantart.net/fs50/f/2009/340/b/0/Me_by_dicabrio.png'); 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header"> 
      bla bla 
     </div> 
     <div id="wrapper"> 
      <div id="wrapper-inner" style="width: 2000px; border: 1px solid black;height: 100px; color: white;"> 
test;test;test;test;test;test;test;test;test;test;test;test;test;test;test; 
      </div> 
     </div> 
    </body> 
</html> 
Questions connexes