Search code examples
htmlcssbackgroundbackground-image

How to have the same background image on each each side?

I when looking at the options for background images I cant find an option of the CSS background-repeat property which fits my desired design. My desired design is like this:

enter image description here

Question:

My desired design is exactly 2 images like this which are a similar distance the window. Is there any way to achieve this in CSS and still keeping the images as a background and not putting them in <img> tags?

Here is a code snippet you can use to apply the CSS to:

.content{
height: 300px;
width: 1000px;
background-color: grey;
background-image: url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw")
}
<div class="content">
 </div>

Solution

  • You can simply use the image twice in background and adjust position/size as you need (you will have multiple backgrounds). You may also put the background-color on the same property.

    Pay attention to order. The first background will be on the top, so the background color should be the last one so it doesn't cover the images.

    .content {
  height: 300px;
  width: 1000px;
  background:  
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") left/auto 100% no-repeat, 
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") right/auto 100% no-repeat,
  grey;
}
    <div class="content">
</div>

    Or you can keep the background-color alone but you have to define it after the multiple backgrounds or it will get overridden by the background property:

    /* This is correct */
.content {
  height: 300px;
  width: 1000px;
  background:  
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") left/auto 100% no-repeat, 
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") right/auto 100% no-repeat;
  background-color:grey;
}
/* This is not correct as background-color will have no effect*/
.content-alt {
  height: 300px;
  width: 1000px;
  background-color:grey;
  background:  
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") left/auto 100% no-repeat, 
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw") right/auto 100% no-repeat;

}
    <div class="content"></div>
<div class="content-alt"></div>

    For more details:

    You can also consider another syntax for multiple backgrounds. Above I used the shorthand one, but you can separate properties. This can be useful if you will have many images that will share the same values (like the size and the repeat in your case). This will also remove the background-color restriction and you can for example easily apply a background-color with another class:

    .content {
  height: 300px;
  width: 1000px;
  /* you can put back this on the top as there is no more background property used */
  background-color:grey;
  background-image:  
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw"), 
  url("https://lh4.ggpht.com/mJDgTDUOtIyHcrb69WM0cpaxFwCNW6f0VQ2ExA7dMKpMDrZ0A6ta64OCX3H-NMdRd20=w300-rw");
  background-size:auto 100%; /* Same for both no need to define twice */
  background-position:left,right; /* we respect the same order as background-image*/
  background-repeat:no-repeat; /* Same for both no need to define twice */

}
    <div class="content">
</div>