unconditionalcoder unconditionalcoder - 5 months ago 26
Javascript Question

Cover entire modal with an image

I am using Materialize CSS. I have a modal, and I want to set the entire background to an image (so when it opens it looks like you're just viewing an image nice and big with background of the web page blurred). The problem is that when I do this, the image gets repeated if the modal is bigger than it.enter image description here

I want the image to just stretch over the entire modal.

My modal:

<div id="imageModal" class="modal">
<div class="modal-content">

</div>
</div>


CSS:

#imageModal{
background-image: url("../images/office2.jpg");
background-reapeat: "none";
height: 50%;
width: 100%;
}

Answer

You had some typo with background-repeat. Try this:

#imageModal{
  background-image: url("../images/office2.jpg");
  background-repeat: no-repeat;
  height: 50%;
  width: 100%;
}

Also, if you're using CSS3, you can set the background-size property to cover so it will help resize your image according to the size of your modal. Like this:

#imageModal{
  background-image: url("../images/office2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 50%;
  width: 100%;
}