Menu
I would like to use 1 background image (1366x768) to use in several divs. But if i use :
.my_divs{
background-image: url("image.jpg");
}
I only have the top left of the image on each divs. I would like to use the portion of the image based on the div position.
I can use transparency on the div and set the background to body.
It will work, but in my case i'm already using background-image for body with another image.
body{
background-image: url("another_image.jpg");
}
Is there a way to maybe "see through" body and show the html background-image ? Or another css trick ?
EDIT : add 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>
285
I think the background-attachment property may do the trick for you.
See: http://www.w3.org/TR/CSS21/colors.html#background-properties
If you use background-attachment: fixed, the background image is fixed with
respect to the viewport. So, if you apply it to several elements, it is as if the background image is being viewed through "lenses" over the page.
If you page has a vertical scroll bar, then the background image will remain 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
