Full screen images with CSS?

HTML & CSS
1

Back again :shifty:

I am trying to make my Nivo Slider display full screen in different screen resolutions without impacting the quality of the images.

I have read up a lot about this and it mostly seems to come down to:

.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
width: 100%;
}

Which I have. This works in so far as it gets rid of the scrollbar… but it doesn’t make the image appear in the screen size, it just crops a corner of it.
As you can see on my page http://ellekorhaliller.co.uk/jQuery/index.html (a work in progress!), I have 2 images that are too small and one image that is a lot bigger than the screen resolution but I put them in to see how they could be scaled to fit.

Does anybody know a good way around this? With CSS or maybe Javascript?

I’ve been going round in circles and it must be possible as there are so many great websites out there doing this!

Many thanks in advance,

Elle.

2

Sounds like you might want something like this jquery plugin that Ralph posted yesterday.

http://buildinternet.com/project/supersized/default.php

3

Thanks Paul O’B.

I actually tried using Supersized but it wierdly desaturates my images quite badly.

I wonder if there’s a section in Supersized which I can use with Nivo Slider just to turn it into full screen…

4

Hi all,

Just been searching the web for a solution to the same problem - making the Nivo Slider work fullscreen, ie like supersized, http://buildinternet.com/project/supersized/default.php and also like this fine site: http://www.gilesrevell.com/

Any help would be greatly appreciated! I have tried all I kow to tweak the code, ut to no avail. I would use supersized, but the transitions are laggy and horrid at 1920 x 1200, whereas Nivo handles it beatiufully!

Thanks,
Mark

5

I am not sure if I understand what you are trying to say, but if there is not enough information in a file to begin with nothing is going to save you. Nothing can make a 640 x 320 image file into a 1280 x 640 w/o sacrificing something. I think you NEED to have very large pictures ( the biggest monitor size you can think of) to begin with and the the jQuery will shrink them to size.

Also, I thought there was a CSS3 property which did this?