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 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts

    background positioning issue in css

    What's background-position: center; not working?
    Explanation needed, please.

    http://jsfiddle.net/h123er2/MAE8r/
    Last edited by h123er2; 10-02-2013 at 11:56 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The background image is centred in #wrap .image there.
    The div is only 300px wide so it isn't very obvious.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    The background image is centred in #wrap .image there.
    The div is only 300px wide so it isn't very obvious.
    still..
    http://jsfiddle.net/h123er2/MAE8r/

  • #4
    New Coder
    Join Date
    Aug 2013
    Posts
    50
    Thanks
    1
    Thanked 3 Times in 3 Posts
    I don't know what you exactly want, because in your last fiddle you had background-position: right. Change it in center and it works, is in the middle of your div, when you want it in the center of your page just add margin: 0 auto; to your #image.
    If you want it exactly in the center of your page instead of zero, put 50%.
    Last edited by Dznr; 10-02-2013 at 04:16 PM. Reason: better answer

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, it was centred how you had it before. Here's the fiddle with the width of that div set to 100%:

    http://jsfiddle.net/qADdd/

    Just to clarify, background-position will take two values - horizontal position and vertical position, so the following are all valid:

    background-position:left top;
    background-position:right center;
    background-position:center top;

    etc etc.

    If you only specify one value, as you had previously, the other value will default to center. So,

    background-position:center;

    is equivalent to

    background-position:center center;
    Last edited by SB65; 10-02-2013 at 04:48 PM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #6
    New Coder
    Join Date
    Oct 2013
    Location
    Bangalore, Karnataka
    Posts
    43
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,
    your try this code its can set position
    #someElement {
    background-position:0 -100px;
    background:url(image.png) no-repeat;


  •  

    Posting Permissions

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