CODEWITHSUNDEEP
htmlcssnivo-slider
jQuerybeast
jQuerybeast

Reputation: 14510

Fullscreen background Image resize

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

Upvotes: 1

Views: 2230

Answers (2)

Nathan Manousos
Nathan Manousos

Reputation: 13858

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!

Upvotes: 1

mqchen
mqchen

Reputation: 4193

It can be done with CSS3 (background-size: cover), like so: http://jsfiddle.net/mqchen/Kq3pa/

Upvotes: 0

Related Questions