CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Adithya Sai
Adithya Sai

Reputation: 1740

Cover a DIV with a Image

I have a div in my code and have inserted some controls in that DIV dynamically. Then i tried to insert an image over that.(The whole div should be covered including controls in that div).

But when i tried to do that i am only able to cover the div and unable to cover the controls in that div.

The code i have used is:

$('#myDIv').css('background-image', 'url("/Assets/Images/transparent-cover.png")');

So my question is what should i do to cover my whole div including controls in jquery.

Upvotes: 3

Views: 706

Answers (3)

Ivin Raj
Ivin Raj

Reputation: 3429

Plz try this one:

 $('#myDIv').css({'background-image':"url('/Assets/Images/transparent-cover.png')", 'background-size':"cover"});

Demo

DEMO 1

Upvotes: 4

YingYang
YingYang

Reputation: 984

Since you want to cover elements inside your div you need to add another element that is able to do so. You could create a CSS-class with an :after-definition, that covers your div. Something like this:

$('.block').hover(function(){
  $(this).toggleClass('cover');
});
.block {
  width: 150px;
  height: 150px;
  margin: 5px;
  background-color: cyan;
  position: relative;
}

.control {
  width: 20px;
  height: 20px;
  margin: 10px;
  float: left;
  background-color: red;
}

.cover:after {
  content: "";
  background-color: blue;
  position: absolute;
  z-index: 1000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div class="control"></div>
  <div class="control"></div>
  <div class="control"></div>
</div>

Upvotes: 1

Swaranan Singha Barman
Swaranan Singha Barman

Reputation: 347

Use background-size:cover to cover a div with background image..

Upvotes: 0

Related Questions