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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post

    Set a background image's position to scale

    For reference, please see this website.

    I want to use the faux columns method to ensure the blue background of the #secondary sidebar extends to the bottom of its parent: #main.

    However, when I use Firefox Developer Tools Responsive View, and reduce the width of the viewport, #secondary's width becomes a %, but #main's background image remains fixed, so the blue part of the background image bleeds into the #primary content area.

    I once read an article where someone used the faux columns method and was able to set the position of the background image to scale down when the viewport was scaled down, so that the colour change of the background image always lined up with the right hand side of the #secondary sidebar.

    I am aware you can set the background-position to a %, but this matches a specific point x% in from the left of the image with a point x% in from the left of its parent, so it always stays in the same position regardless of what % you specify.

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    I posted this another thread that had a similar problem. You can use a CSS3 property to fix this, but you have to be aware that not all browsers will support this.

    Code:
    background-size:contain;
    My signature :)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    @ttkim, The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
    Evolution - The non-random survival of random variants.

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Thank you both.


  •  

    Posting Permissions

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