Clever Geek Handbook

One background image for multiple divs

I would like to use 1 background image (1366x768) for use in multiple divs. But if I use:

.my_divs{
 background-image: url("image.jpg");
}

I only have the top left of the image on each div. I would like to use a portion of the image based on the div position. I can use transparency on the div and set the background to body

.

This will work, but in my case I am already using background-image

for body

with a different image.

body{
 background-image: url("another_image.jpg");
}

Is there a way to "see through" body

and show the background image html

? Or some other css trick?

EDIT : add a simple example

<style>
.mydivs{
    padding:30px;
    margin:30px;
    background-image: url("2.jpg");
}
body{
    background-image: url("1.jpg");
}
#container{
}
</style>
<body>
    <div id='container'>
        <div class='mydivs'>1</div>
        <div class='mydivs'>2</div>
        <div class='mydivs'>3</div>
    </div> 
</body>
+3


source to share


5 answers


I think the property background-attachment

might do the trick for you.

See: http://www.w3.org/TR/CSS21/colors.html#background-properties

If you are using background-attachment: fixed

, the background image is captured with a viewport. Thus, if you apply it to multiple elements, it looks like the background image is viewed through the "lenses" above the page.



If the page has a vertical scrollbar, the background image will stay fixed as the content moves (this may not suit your design).

.bgdeco {
  width: 700px;
  height: 100px;
  margin: 30px;
  border: 1px solid yellow;
  background-image: url(http://placekitten.com/2000/700);
  background-attachment: fixed;
  background-position: top center;
}
      

        
        
        
      

    
<div class="bgdeco"></div>
<div class="bgdeco"></div>
<div class="bgdeco"></div>
Run codeHide result


+3


source


You can use background-position: xpos ypos;

to adjust the position of the picture.



0


source


Html

<div id='container'>
<div id='divHead' class='mydivs'>&nbsp;</div>
<div id='divTorso' class='mydivs'>&nbsp;</div>
<div id='divLegs' class='mydivs'>&nbsp;</div>
</div>

CSS

#container {
background-image:url('myPic.jpg');
}
.mydivs {
background-color:transparent;
}
0


source


Yes, you can set a transparent background for any HTML tag, including the body! You can achieve your goal in several ways.

  • Add background image to HTML tag and set background: none;

    to body and all leading tags
  • You can add parent div for all sections you want to set images and then add background-image

    to parent div and set all chind divsbackground: none;

see below example

html, body {
  padding: 0px;
  margin: 0px;
  }
body {
  background: red;
  }

#parent {
  background: url('http://thumb7.shutterstock.com/display_pic_with_logo/996335/251280085/stock-vector-abstract-polygonal-space-low-poly-dark-background-with-connecting-dots-and-lines-connection-251280085.jpg');
  background-size: cover;
  margin: 10px;
  padding: 10px;
  display: block;
  float: left;
  }
.child {
  display: block;
  float: left;
  width: 100px;
  height: 100px;
  font-size: 40px;
  color: #fff;
  border: 2px solid #ccc;
  margin: 5px;
  }
      

        
        
        
      

    
<div id="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
</div>
Run codeHide result


0


source


If you know how many divs you will be covering, you can use background-position

with a little simple math. Take a look at the fiddle .

0


source






More articles:


All Articles