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

Stretch Image for full screen

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

Stretches an image you put in start of body to cover the full screen
I started with an image I could paint the background then cropped it to 235:100 ratio (movie widescreen)
This uses CSS so it works for all desktop browsers, but the image might get cut off when stretched

The image I'm starting with for the example is 800px wide X 340px high then CSS strectches it to your screen width
When you use large images optimize them for download you can read more about image use in the CSS section
I try to optimize my image download size to be as close to 40KB as possible this example image is 22KB


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 (transparent) banners like I did here with the colored (black and gray) backgrounds
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 isn't the best option since if the image isn't sized properly to the screen ratio it can get cut off
You can always ask me on the WSnext forum if you have any questions

Name your image 1.jpg and
Attach it to "website properties"

On the HTML tab in Insert Page HTML
copy/paste this into Inside HEAD

<style type="text/css">
#bg {position:fixed; top:0; left:0; z-index:-2; min-width:100%; min-height:100%;}

NOTE: You put this at the top in the HEAD
before any other style so it loads first

Customize the Code

1.jpg - is the name of the image you attached

Preview to see it work


Web Studio 5 - How to stretch an image to fill the entire screen - by Web Studio Next

On the HTML tab in Insert Page HTML
copy/paste this into Start of Body

<img src="1.jpg" id="bg" alt="">