Image not fitting inside of a DIV - html

Question

I am trying to place an image inside of a div. My problem is it is not fitting the image into the div, the image is in the div, it is just not fit to the div. It shows like a portion of the image because the image is bigger than the div. Can anyone help me get it to fit the whole image in the div without it being dis-proportional? I have the following:
Markup
<div class="col-lg-2 col-md-4 col-sm-6 newClass">
<div class="module img-responsive" style="background-image: url(Images/my_image.jpg);">
<header>
<h1 style="font-size: 20px; text-align: center;">Text
</h1>
<h2 style="font-size: 13px; text-align: center;">Some more text
</h2>
</header>
</div>
</div>
CSS
/* Overlay text */
.module {
/*background-color: #abc;*/
background-attachment: fixed;
/*width: 400px;*/
height: 300px;
position: relative;
overflow: hidden;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
}
.module > header > h1 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
.module > header > h2 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
Image

Answer 1

I know this is already answered, but you may prefer this solution better:
Demo
It allows scaling the image but without stretching it, as that is usually undesired.
If the image gets too big, you can always add a max-width to prevent that if you want.
HTML
<div class="col-lg-2 col-md-4 col-sm-6 newClass">
<div class="module img-responsive" style="background-image: url('http://i.stack.imgur.com/NuEZ2.jpg');">
<header>
<h1 style="font-size: 20px; text-align: center;">Text
</h1>
<h2 style="font-size: 13px; text-align: center;">Some more text
</h2>
</header>
<img src="http://i.stack.imgur.com/NuEZ2.jpg" style="visibility:hidden; width:100%; display:inherit"/>
</div>
</div>
CSS
/* Overlay text */
.module {
background-size:cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: inherit;
background-position: bottom;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: inherit;
background-size: cover;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
}
.module > header > h1 {
margin: 0;
padding: 10px 10px;
color: white;
position: relative;
z-index: 1;
}
.module > header > h2 {
margin: 0;
padding: 10px 10px;
color: white;
position: relative;
z-index: 1;
}

Answer 2

You need to remove background-attachment: fixed and implement background-size as follows. Here's the demo.
.module{
background-size: 100% 100%;
/* other css */
}

Answer 3

you have another class called newClass that you haven't supplied mark-up for _
i'm just wondering if it has relevant parameters that might affect the outcome of .module class?

Answer 4

Try
<div class="col-lg-2 col-md-4 col-sm-6 newClass">
<div class="module img-responsive" style="background-image: url(Images/my_image.jpg);background-size:cover;">
<header>
<h1 style="font-size: 20px; text-align: center;">Text
</h1>
<h2 style="font-size: 13px; text-align: center;">Some more text
</h2>
</header>
</div>
</div>

Answer 5

You should set background-size to cover ie...
.img-responsive{
background-size: cover
}

Answer 6

It looks like you're using a background image here. Try setting background-size to "contain" or "cover" on your module class. Be aware that background size is not supported in older versions of Internet Explorer.