web-dev-qa-db-fra.com

Comment ajouter deux images de fond - à gauche et à droite de la colonne centrale

J'ai ce css:

#wrapper1 {
min-width:1020px;
min-height:100%;
}
#wrapper2 {
height:100%; 
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat;
}
#wrapper3 {
width:1020px;
margin:0 auto;
}

et ce html:

<div id="wrapper1">
 <div id="wrapper2">
   <div id="wrapper3" class="clearfix" <!-- content here -->
        <p>blah blah blah</p>
   </div>
 </div>
</div>

Je dois ajouter 2 images - à gauche et à droite de la colonne centrale, sans modification de la largeur de la colonne centrale et indiquant que les images n'ont pas d'incidence sur la largeur totale de la page. Exemple:

Example Image

Je peux ajouter des images, et fait quelques tentatives

  1. lorsque j'essaie de modifier la largeur du navigateur - les images d'arrière-plan apparaissent dans la colonne centrale Image

  2. J'ai essayé de changer min-width:1020px; to min-width:1665px; - au premier abord, tout va bien, mais pour la résolution de l'écran - moins de 1665px, tout le contenu est décalé vers la droite J'ai essayé quelques options mais sans succès.

Ma question: Puis-je placer une image de sorte que, lorsque vous modifiez la largeur du navigateur, réduisez la distance à gauche et à droite de la colonne centrale (il s'agit du comportement par défaut si aucune image d'arrière-plan n'est créée)

Voici un code avec des exemples d'images.

Si je crée une grande image avec 1020px une partie centrale vierge et y insère mes images gauche/droite, cela fonctionnera-t-il?

htmlcsscss3positioningbackground-image
8
Vasiliy Terkin

Vous pouvez suivre plusieurs solutions:

1) Utilisez divs: [good]

Créer un bon "framework" de divs peut résoudre votre problème, par exemple:

<div id="allWrapper">
 <div id="leftSidebar"></div>
 <div id="centerOrContent"></div>
 <div id="rightSidebar"></div>
</div>

Et un pseudocode de CSS (non testé):

div#allWrapper{
 width: 100%;
 heigt: 100%;
}
div#leftSidebar{
 min-width: [theWidthOfLeftImage] px;
 height: 100%;
 background-image: url(leftImage.jpg);
 backround-position: center right;
}
etc...

Ensuite, en jouant avec CSS (flottant et tailles), vous pouvez ajuster la vue. 

2) Utilisez plusieurs arrière-plans: [pas toujours bon]

Vous pouvez utiliser ce pseudocode CSS pour utiliser plusieurs arrière-plans (disponibles ici: http://www.css3.info/preview/multiple-backgrounds/ ).

div#example1 {
width: 500px;
height: 250px;
background-image: url(oneBackground), url(anotherBackground);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

3) utilise une "grande" image statique: [solution lente]

Utiliser une image statique comme vous le suggérez (avec un blanc au milieu) peut également résoudre le problème, mais si le site Web est "réactif", vous pouvez rencontrer des problèmes graphiques avec une résolution d'écran différente (ou un redimensionnement de la fenêtre du navigateur). ] Dans ce cas, vous devez également fixer la position et la largeur de la colonne centrale (lors du redimensionnement de la fenêtre).

4) use responsive design: [excellent - do it!]

Pour éviter le chevauchement des images sur la div centrale (contenu), vous pouvez définir la couleur d'arrière-plan (de cette div) en blanc. 

Encore une fois, pour éviter les chevauchements, vous pouvez définir un CSS réactif "spécial". Cela détecte si la largeur de la fenêtre est <X les 2 images disparaissent. Par exemple avec ce pseudocode CSS:

@media only screen and (min-width: 481px) {
//here happens something when the screen size is >= 481px
 div#example {
   background-image: url(oneBackground);
 }
}

@media only screen and (max-width: 481px) {
//here happens something when the screen size is <= 481px
 div#example {
   background-image: none;
 }
}

Voici quelques liens trouvés sur le web à propos de responsive design:

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

18
damoiser

Vous pouvez utiliser deux DIV absolues avec deux arrière-plans. Un centre gauche et un autre centre droit:

Placez les DIVs où vous voulez sur le site. (ils sont absolument positionnés)

HTML:

<div class="background" id="background1"></div>
<div class="background" id="background2"></div>

CSS:

.background{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

#background1{
    background: url(yourImage1.jpg) no-repeat 100% 0;
}

#background2{
    background: url(yourImage2.jpg) no-repeat 0 0;
}
3
Alvaro

Ceci est un code de travail pour moi. la seule chose qui changera est le background-position pour les deux propriétés. 

.image-bg-custom1 {
    background-image: url(/images/left-get.png);
    background-repeat: no-repeat;
    background-position: center left;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.image-bg-custom2 {
    background-image: url(/images/right-get.png);
    background-repeat: no-repeat;
    background-position: center right;
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
0
iFart