background not sizing right when website zooming in/out

[view4coins]

(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

[TheDoc]

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.

[view4coins]

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

[snippet]

but kind-of corky right now (

[TheDoc]

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

html { background: .... ; }



body { background: ..... ; }

[view4coins]

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

[view4coins]

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

[TheDoc]

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

[view4coins]

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

[babyGinner]

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

[babyGinner]

*an image

[dhiruSingh]

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

[Author]

Posts