CSS - le positionnement d'une image de fond sur une mise en page fluide

Question

de sorte que la mise en page est comme ceci:

<div style="width: 100%;" class="container"> 

    <div class="col1" style="width:30%;float:left;"> 
    column 1 
    </div> 

    <div class="col2" style="width:70%;float:left"> 
    column 2 
    </div> 

</div> 

Je veux faire div.col1 une couleur différente, donc pour cela que je utilise une image de fond répéter verticalement sur div.container . Le problème est que ce conteneur est fluide et je ne sais pas comment positionner l'image.

J'ai essayé quelque chose comme ça, mais il ne fonctionne pas lorsque vous redimensionnez la fenêtre du navigateur:

.container{background: transparent url(images/bg.png) repeat-y -70% top; 

Existe-t-il des façons de le faire?

Answer 1

Je ne connais pas toutes vos exigences, mais cela fonctionnera mieux si vous pouvez définir le background-color de .container à ce que vous voulez que votre colonne de gauche soit, puis utiliser l'image répétée pour remplir la colonne de droite. La raison en est que le positionnement de l'arrière-plan ne peut pas être fait par la droite, seulement la gauche. Donc, quelque chose comme:

.container{background: #ffffff url(images/bg.png) repeat-y 30% top} 

Lorsque le #ffffff représente la couleur de la colonne de gauche, et la bg.png la colonne de droite. Si vous avez vraiment besoin de la gauche pour être le png, alors vous aurez probablement besoin d'un second wrapper autour des divs flottants. Quelque chose comme:

<div style="width: 100%;" class="container"> 
<div class="inner"> 
    <div class="col1" style="width:30%;float:left;"> 
    column 1 
    </div> 

    <div class="col2" style="width:70%;float:left"> 
    column 2 
    </div> 
</div> 
</div> 

Définissez l'emballage inner (cela pourrait juste être une couleur unie plutôt qu'une image répétée):

.inner{background: url(images/bgright.png) repeat-y 30% top} 

Et votre conteneur:

.container{background: url(images/bgleft.png) repeat-y left top} 

Les 30% 'gap' du inner permettra à l'arrière-plan de la colonne 30% gauche d'apparaître à travers container.