Question

I’m trying to set a background image to fullscreen, and on window resize the image doesn’t change actuall pixel size, but get’s smaller (crop-like).

This is what I mean: (Try to resize window and notice that the picture gets smaller or larger but doesn’t pixelate) http://jsfiddle.net/G7Qc4/

Now, the above works because of the image is a background of a div and I’ve set:

background-position: center top;

If it was just plain <img> it doesn’t work which my question is how can I make it work? If there is any way around?

I am using the nivoSlider which doesn’t accept div’s for image’s so I will have to use <img>.

Thanks alot

Answer 1

If I understand, you want to use an actual tag as a background instead of background-image.

Here is my solution:
http://jsfiddle.net/ttZeM/

It requires knowing the dimensions of the background image.

There is a div holding the background which is absolutely positioned, the site content is absolutely positioned on top of it.

To center the background image, I moved it -500px to the left, which is half it’s width. It is inside of a div that is 0px wide, being centered with position:absolute; left:50% a strange technique, but it works if you know the image size.

Also note that the bg_wrap div has overflow:hidden; and width:100%; this means you won’t see scrollbars off the edges of the screen.

I hope this is what you were after!