CODEWITHSUNDEEP
css
unusuario
unusuario

Reputation: 161

show full width and height the image-background

It may seem like a repeated question, but in my case nothing has worked. I want to put a picture inside a div and show it completely until it is possible. my image is a rectangle with edges in the corners, I would like it to be seen inside the div according to the size of the div.

enter image description here

    .container_img{
       border:1px solid red;
       margin-top:-14px;
       display: table; 
       margin-top:2px; 
       width: 709px; 
       height: 141px;     
       background-image: url("https://i.imgur.com/VBOZfaY.png");
       background-repeat: no-repeat;
    }
    <div class="container_img"></div>

https://jsfiddle.net/86avtx54/

Upvotes: 0

Views: 35

Answers (3)

sabeen kanwal
sabeen kanwal

Reputation: 607

check it out..might help you..

<style>
.container_img{
   border:1px solid red;
   margin-top:2px; 
   width: 100%; 
   height: 100%;     
  
   }
</style>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
<div class="container_img">
<img src="https://i.imgur.com/VBOZfaY.png">
</div>


</body>
</html>

enter image description here

Upvotes: 0

Amine KOUIS
Amine KOUIS

Reputation: 1459

Add background-size: 100% 100%;. See the code snippet below

   .container_img{
       border:1px solid red;
       margin-top:-14px;
       display: table; 
       margin-top:2px; 
       width: 709px; 
       height: 141px;     
       background-image: url("https://i.imgur.com/VBOZfaY.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
    }
 <div class="container_img"></div>

Upvotes: 1

Giovan Cruz
Giovan Cruz

Reputation: 721

You need to set background-size: contain; or background-size: cover;

Upvotes: 0

Related Questions