Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Thumbs down Background Image Re-Size Depending on Window Size

    Hey guys, so i am working on a site right now for mobile.
    And all of the comments are wrapped in a Div like so

    Code:
    <div class="comment">
          <div class="comment_top"></div>
          <div class="comment_middle">
                <p>All of the comment info goes in here</p>
          </div>
          <div class="comment_bottom"></div>
    </div>
    The div's, comment_top, comment_middle, comment_bottom all have background images with specific widths right now.

    Is there a way to make these Background Images re-size with the size of the window ( phone screen ). And not have a specific width.

    If you have a smart phone you can go to www.stage.1cp.ca/discover/sort/recent

    And view the comment area, right now because the width is specific, the right side is always cut off.

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Location
    CA
    Posts
    105
    Thanks
    0
    Thanked 10 Times in 10 Posts
    If you use the following, putting your image inside a div, size your images for the desktop screen, but when viewed in a mobile phone, the images will resize to fit:

    <div style="width:100%">
    <img src="xxxx.jpg" width="900px" style="max-width:100%">
    </div>

    The max-width will make sure the image never goes outside its container element -- in this case, the div.


  •  

    Tags for this Thread

    Posting Permissions

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