CODEWITHSUNDEEP
htmlcss
seulgibear
seulgibear

Reputation: 603

Background image not filling the entire div

I am working on a modal wherein there's an image background. Now, the image is not filling the entire div. Here's what I currently have in my css:

CSS:

.modal {
    border-radius: 10px;
    min-width: 65vw;
    min-height: 40vh;
    border-width: 5px;
    border-style: solid;
    border-color: var(--secondary);
    background: url("../../../assets/cloudy.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

HTML:

<div class="modal"></div>

Whenever I replace the background with a color, it works. Here's what it currently looks like with background image vs with color:

Background Image

Background Color

I've tried changing background-size to contain and 100% 100%. It didn't work.

Is it a problem concerning the image? Because the image is very long. 1942 × 478 to be specific. Thanks in advance!

Upvotes: 1

Views: 581

Answers (1)

WienyButt
WienyButt

Reputation: 50

i have tried most of the pics on my laptop and it seems to work just fine.

.modal {
    border-radius: 10px;
    min-width: 65vw;
    min-height: 40vh;
    border-width: 5px;
    border-style: solid;
    border-color: var(--secondary);
    background: url("https://media.mnn.com/assets/images/2018/08/CollectionOfCloudsAgainstABlueSky.jpg.653x0_q80_crop-smart.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
  <body>
    <div class="modal"></div>
  </body>
</html>

if you put a link of the image in code instead of the local file name i can help. but maybe its a png problem because the top and bottom could be see trough. (also i cant comment so this is the best way to communicate, sorry.)

Upvotes: 1

Related Questions