WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Large body background-image twenty ten image shifting (11 posts)

  1. adsleeblythe
    Member
    Posted 1 year ago #

    Hi,

    I am using a child theme of twenty ten and am using a large background-image in the body tag.

    It displays fine, however, when I resize my browser window smaller than the content width the background image shifts to the left.

    I want it to remain fixed in the center of my browser window.

    I have referred to web designer wall's article on 'how to: css large background' and still no luck!

    Please take a look at my background-image problem on my blog.

    Can somebody please suggest a solution because I have been going mad trying to figure this out!

    Thanks

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Provide a link to the problematic webpage. Resolving CSS issues hypothetically consumes too much time.

  3. adsleeblythe
    Member
    Posted 1 year ago #

    Sorry @Andrew Nevins just edited my post.

    See here

    Thanks

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try adding the CSS;

    body {
     background-position: 99px 0;
    }
  5. adsleeblythe
    Member
    Posted 1 year ago #

    Like this?

    body {
        background: url("http://www.adamleeblythe.co.uk/wp-content/uploads/2013/01/body_bg1.jpg") no-repeat scroll 99px 0 #EDEADE;
        display: table;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    The background is image no longer shifts when the browser window is smaller than the content width, yet it sits 99px from the left of the screen and not in the center.

    Where did you get 99px from?

    I appreciate your help on this.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Where did you get 99px from?

    In my screen size, the background image was 99 pixels from the left. I hadn't realised it was centred regardless of screen size.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    How about just removing the background position you have on your body element?
    That should stop your image being cut-off so drastically.

  8. adsleeblythe
    Member
    Posted 1 year ago #

    Ok, yes the background-image is centered using

    background: url("http://www.adamleeblythe.co.uk/wp-content/uploads/2013/01/body_bg1.jpg") no-repeat scroll center top #EDEADE;

    My background image is 1152px wide and when resizing the browser window smaller than the content area (#wrapper that is 940px wide), the background image starts to shift to the left.

    I want it to remain centered when the browser window or screen resolution is smaller than the content width! And I realise that my background image will be cropped but that is not an issue.

    If you refer to web designer wall's demo and reduce the size of your browser window you will notice the background image stays in the center of the screen.

    This is what I would like to achieve!

    Can anyone help me out there please!

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    That tutorial uses an additional background image on the <html> element to achieve that look.

  10. adsleeblythe
    Member
    Posted 1 year ago #

    You are right I didn't even try adding a background image to <html> element.

    Thanks for pointing that out!

    All solved now.

    html {
    	background: url("http://www.adamleeblythe.co.uk/wp-content/uploads/2013/01/gradient_bg.gif") repeat-x scroll 0 0 #EDEADE;
    }
  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    And Thank you for contributing to the WordPress community :)

Topic Closed

This topic has been closed to new replies.

About this Topic