CODEWITHSUNDEEP
htmlcssimage
Mdermez
Mdermez

Reputation: 549

Adding img to div as a background

What should be the proper style for the IMG in order to work as a background for the Div? I don't want to use CSS to set the background on div because I will have many LI with different DIVS and images every time. 

<li class="container">
    <div class="inside"> some elements 
       <img src="some image"></img>
    </div>
</li>

Upvotes: 1

Views: 84

Answers (5)

Aman
Aman

Reputation: 37

I beleive following can help, (without separate CSS)

    <div class="inside" style="background-image:url('xyz.jpg');height:xypx; width=xzpx;">
</div>

Upvotes: 0

Bj&#248;rn
Bj&#248;rn

Reputation: 101

Hei! The style for IMG in order to work as a background for the DIV:

.inside{position:relative;}
img{position:absolute;left:0;top:0;z-index:-1;}

Upvotes: 2

therahulsubedi
therahulsubedi

Reputation: 36

You can try like this :

<div class="div_img">

</div>

And css:

.img{
background-image: url('../images/div_img.jpg');
}

Upvotes: 0

NGPixel
NGPixel

Reputation: 390

I would still use CSS, but inline:

<li class="container" style="background-image:url(image.jpg) top left no-repeat">

Using an image tag for background is poor semantic.

Upvotes: 3

m4n0
m4n0

Reputation: 32255

You can position it with respect to the parent with position: absolute To view the contents on top, I have used a priority z-index: 1 for the span element.

.inside {
  position: relative;
}
img {
  position: absolute;
  top: 0;
  left: 0;
}
span {
  position: absolute;
  z-index: 1;
}
<li class="container">
  <div class="inside"><span>Some Elements</span>
    <img src="http://placehold.it/500x500" />
  </div>
</li>

Upvotes: 1

Related Questions