Treehouse: Grow your CSS skills. Land your dream job.

background not sizing right when website zooming in/out

  • # February 3, 2012 at 12:26 pm

    (first post) Hey guys, so i’m no pro at CSS – still learning off templates but working on a website and I just recently saw when i zoom in and out that everything floats correctly except my actually background image. I’m seriously stumped on how I should fix this because of my inexperience (i’ve looks on w3schools and searched around a bit on the forums)

    here is the problem child (aka: website) – I’ll keep trying options on fixing it but I hope someone is just like “hey stupid, it’s [this]”

    Thanks in advance


    # February 3, 2012 at 12:32 pm

    The background isn’t actually working from the get-go. You are trying to position it with pixels, which means that it’s not going to be centered on any monitor that isn’t using a resolution that you are. Do this instead:

    background-position: center 120px;

    Also, IE is not going to like you using the multiple backgrounds thing. Since you don’t have anything on the HTML element, I’d put your dark layer on that instead.

    # February 3, 2012 at 12:50 pm

    ahh ok, yeah im making a div class right now. trying to stick it right under [body]


    but kind-of corky right now (

    # February 3, 2012 at 1:16 pm

    Why would you do that? Why don’t you just do:

    html { background: .... ; }

    body { background: ..... ; }
    # February 3, 2012 at 1:31 pm

    ahh sweet! (i have a grin on my face now) still have a few of my other images I did wrong (i see) but I should be able to figure it out now. thank you very much Doc

    # February 3, 2012 at 1:36 pm

    I should use margins for image placement i’m guessing?

    # February 3, 2012 at 1:49 pm

    For backgrounds? No, if you’re trying to center a background to a person’s monitor, you’ll want to use ‘center’. Example:

    body { background: url('images/my-background.jpg') center top; }

    That means it’ll be centered horizontally and will be snug to the top.


    # February 4, 2012 at 4:42 am

    Or.. background-position:0px 50%; ??

    # February 4, 2012 at 8:47 am

    well i got everything working now (it seems). I learned alot, I’m probably still doing bad practice with CSS but it will suffice till I get a better grasp of it.

    oh thank ya doc and homp =)

    # December 12, 2012 at 9:48 pm

    i tried using your suggestions, but still, its not working.
    i used a image to be used on my background, but when i zoom it out, the image repeats itself even though i declare no repeat and fixed on my .css

    kindly help me :(

    # December 12, 2012 at 9:48 pm

    *an image

    # December 13, 2012 at 1:33 am

    @view4coins@babyGinner… you can use this code its will work in all browsers

    html{background:url(XXXXXXXXX.jpg) no-repeat center; background-size:100%; width:100%; height:100%;}

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.