div backround image not resizing correctly

I have a div that is set to 100% width. i need the image to resize to the full 100%.
i also have another div inside this that contains an image that should sit in the middle of the outer div. there is also text on the outer div that needs to sit at the bottom. Currently the image is not resizing. here is what i have:-

Code:

---

.productLeft {
        height: 340px;
        width: 100%;
        background-size: contain;
        background-repeat:no-repeat;
        vertical-align: bottom;
        display: table-cell;
}
.soldoutLeft {
        height: 100px;
        margin: auto;
        width: 100%;
}

---

the div

Code:

---

    <div class="productLeft" style="background-image:url('../images/SS16/<?php echo $row_rsCatLeft['Image']; ?>')"><br>
              <div class="soldoutLeft"><img src="../images/sold-out.png" alt="sold out" width="100" height="100" align="right" /></div>
              <div align="right"><?php echo $row_rsCatLeft['Price']; ?></div>
            </div>

---

Without knowing the aspect ratio of the image or what it shows I can't say which will work best, but (I think) you need to change background-size:contain; to either background-size:100% 100%; or background-size:cover;

"contain" means the image in it's original aspect ratio will fit in the container, so say your image is 170px tall and 400px wide, the image will grow to fill the container but won't expand beyond the first edge it hits, so your height:340px means it can double in height and width to 340px x 800px but if the 100% is greater than 800px the remainder won't have a background. So say we have a 1200px wide screen the remaining 400px will be blank.

If you use "cover" it will grow until it is big enough to hit the furthest edge of the container but will expand beyond the nearest edge getting cut off, so again if we assume a 1200px wide screen it will 'grow' to 1200px wide to fill the screen but in doing so will grow to 510px tall, meaning the container will be entirely covered but the bottom third of the image will be cropped off as it is now taller than the container.

If you use 100% 100% it will stretch the image to fit both height and width, so the whole image will always be displayed but it will be out of shape, either stretched on wide screens or squished on narrow ones.

Quote:

---

Originally Posted by Neil1

Without knowing the aspect ratio of the image or what it shows I can't say which will work best, but (I think) you need to change background-size:contain; to either background-size:100% 100%; or background-size:cover;

"contain" means the image in it's original aspect ratio will fit in the container, so say your image is 170px tall and 400px wide, the image will grow to fill the container but won't expand beyond the first edge it hits, so your height:340px means it can double in height and width to 340px x 800px but if the 100% is greater than 800px the remainder won't have a background. So say we have a 1200px wide screen the remaining 400px will be blank.

If you use "cover" it will grow until it is big enough to hit the furthest edge of the container but will expand beyond the nearest edge getting cut off, so again if we assume a 1200px wide screen it will 'grow' to 1200px wide to fill the screen but in doing so will grow to 510px tall, meaning the container will be entirely covered but the bottom third of the image will be cropped off as it is now taller than the container.

If you use 100% 100% it will stretch the image to fit both height and width, so the whole image will always be displayed but it will be out of shape, either stretched on wide screens or squished on narrow ones.

---

the vertical-align: bottom;
display: table-cell;
was causing the issue so i removed it and i gave the <div align="right"><?php echo $row_rsCatLeft['Price']; ?></div> its own class then that has fixed it.

Code:

---

.productLeft {
        height: 360px;
        width: 100%;
        background-size: contain;
        background-repeat:no-repeat;
}
.soldoutLeft {
        height: 100px;
        width: 50%;
        padding-right: 50%;
}
.priceLeft {
        padding-top: 50%;
}

---

Code:

---

<div class="productLeft" style="background-image:url('../images/SS16/<?php echo $row_rsCatLeft['Image']; ?>')"><br>
              <div class="soldoutLeft">
                <img src="../images/sold-out.png" alt="sold out" width="100" height="100" align="right" />
              </div>
              <div class="priceLeft">

---

did you try height:auto; rather than posting 360px?