CODEWITHSUNDEEP
htmlcssimage
bob dylan
bob dylan

Reputation: 1109

One background image for multiple divs

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>

Upvotes: 9

Views: 11980

Answers (6)

n_che
n_che

Reputation: 73

This is not necessarily a good solution -- but how about setting the borders of inner divs instead of the margins: the borders will be not transparent and cover the background image, the inner divs will be transparent and show the background image. You can set up the borders in vw and vh to make them responsive.

.inner-divs {
    width: 20%;
    height: 100%;
    background-color: transparent;
    border: rgb(255, 255, 255) solid 5vw;
}

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

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>

Upvotes: 14

Bart Jedrocha
Bart Jedrocha

Reputation: 11570

If you know how many divs you'll be spanning you can use background-position with a bit of simple math. Take a look at this fiddle.

Upvotes: 2

Pratik Shah
Pratik Shah

Reputation: 828

Yes you can set a transparent background to any HTML tag including body! You can achieve your goal via multiple ways..

  1. Add a background image to HTML tag and set background: none; to body and all leading tags
  2. You can add a parent div to all the divs you want to set a single image background and than add background-image to parent div and set all chind div's background: none;

check out 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>

Upvotes: 0

MrEhawk82
MrEhawk82

Reputation: 819

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;
}

Upvotes: 1

potatopeelings
potatopeelings

Reputation: 41065

You can use background-position: xpos ypos; to adjust the position of the image.

Upvotes: -1

Related Questions