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

Small Image - to full screen

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

Takes a small efficient sized image and makes it fill the entire screen in 3 easy steps
The image will diminish to the default size of web studio and updates the older full screen version
This uses a small add on jQuery script so it works for all desktop browsers

The image I'm using for the example is 700px wide X 394px high no need to put the size though this one does that for you
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 this image for example is only 24KB


You can place text or other images on top of these.
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
This is still the best option for FULL SCREEN images since it uses a small image and makes them fit perfectly
You can always ask me on the WSnext forum if you have any questions

To set it up in web studio quickly you attach an image called 1.jpg (I include this one)
and the download files, copy / paste some code and it's all ready to run for you on preview

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 a small image to fill the entire screen - by Web Studio Next