Full Screen in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Change Image for full screen

 WSnext buy now ADD on effect - Thank-you for help with maintaining the website and for understanding my time

Fades images in then centers them horizontally and vertically so the image will scale with no distortion
You can include links to change the images or you can just use it for a full page background
Uses a small 2KB jQuery code and automatically writes the image CSS for you

The images I'm using for the example are all different sizes from 800 to 1400 wide you can use smaller images too
When you use large images optimize them for download you can read more about image use in the CSS section
I optimize my image download size to be as close to 40KB as possible these images for example are close to 35KB


The larger or better quality image you use the better this looks, these are different sizes and quality of optimizing
You can place text or other images on top of these with web studio the same as you always do
You could place a DRAW TAB SHAPE on your page and change it's opacity in the CREATE TAB to make it transparent
Other options are to use a screen wide banner like I did here with a transparent png background
You wouldn't use a large image on your mobile site anyway but iOS up to v5 has a problem with fixed images
this will work for a mobile site and the image still sizes to the screen but doesn't scroll in iOS until v5
You can always ask me on the WSnext forum if you have any questions, like how I made these style of links

To set it up in web studio quickly you attach an image called 1.jpg
the download files, copy / paste some code and it's all ready to run for you on preview
I'll include 3 images and show you how to add the links as well

The buy now link will show you how to copy/paste the add on into Web Studio
If you need any additional help feel free to ask on the WSnext forum


After the secure "Paypal" link you
will be taken to the code page


These effects are not officially part of Web Studio

Web Studio 5 - How to use images to fill the entire screen and change them with links - by Web Studio Next