Results 1 to 4 of 4

Thread: div backround image not resizing correctly

  1. #1
    Join Date
    Nov 2011
    Posts
    74
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default 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>

  2. #2
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Nov 2011
    Posts
    74
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Neil1 View Post
    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">

  4. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

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

Similar Threads

  1. Help with backround in html
    By PsPgEeK1234 in forum HTML
    Replies: 8
    Last Post: 02-02-2009, 03:22 PM
  2. When checkbox is selected backround is different
    By motormichael12 in forum JavaScript
    Replies: 11
    Last Post: 03-13-2008, 04:20 AM
  3. Problem with backround image in IE7.
    By markpap in forum HTML
    Replies: 1
    Last Post: 07-13-2007, 02:32 PM
  4. Starfield Backround in Firefox
    By Cheng in forum JavaScript
    Replies: 2
    Last Post: 12-10-2006, 07:28 AM
  5. Backround image slideshow
    By srb6101 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-17-2004, 02:58 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •