treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] background not sizing right when website zooming in/out

  • (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) www.view4coins.com - I'll keep trying options on fixing it but I hope someone is just like "hey stupid, it's [this]"

    Thanks in advance

    -JM
  • 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.
  • ahh ok, yeah im making a div class right now. trying to stick it right under [body]

    [snippet]

    <div class="body-bg">
    <img src="./img/bg.jpg">
    </div>


    but kind-of corky right now (
  • Why would you do that? Why don't you just do:
    html { background: .... ; }

    body { background: ..... ; }
  • 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
  • I should use margins for image placement i'm guessing?
  • 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.

    Example: http://dabblet.com/gist/1731709
  • Or.. background-position:0px 50%; ??
  • 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 =)
  • 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 :(

  • *an image

  • @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%;}