Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS background not sizing right when website zooming in/out

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #36503
    view4coins
    Member

    (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) http://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

    #96113
    TheDoc
    Member

    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.

    #96115
    view4coins
    Member

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

    [snippet]

    but kind-of corky right now (

    #96117
    TheDoc
    Member

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

    html { background: .... ; }

    body { background: ..... ; }
    #96118
    view4coins
    Member

    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

    #96122
    view4coins
    Member

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

    #96123
    TheDoc
    Member

    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

    #96162
    view4coins
    Member

    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 =)

    #117151
    babyGinner
    Participant

    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 :(

    #117152
    babyGinner
    Participant

    *an image

    #117173
    dhiruSingh
    Member

    @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 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.