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

Large 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

Centers a large image with the sides hidden on smaller screens, the bigger the image the more screen it covers
The image can be started a number of pixels down from the top for your header
This uses CSS so it works for all desktop browsers and will scroll, but the image can be a big download

The image I'm using for the example is 1920px wide X 1080px high the average computer screen width is 1375px
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 but this large example image is 106KB


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 banner like I did here with a colored (black) background
You wouldn't use a large image on your mobile site but this one does scroll so no problem with being fixed in iOS
You could make your pages match the image height for a full screen look or leave room at the bottom for a footer
This isn't the best option since it uses a large image which can be a slow download so optimize optimize optimize
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">
body {background:#2a2a2a url(1.jpg) center 100px no-repeat;}

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

Customize the Code

#2a2a2a - is the background color of your page
1.jpg - is the name of the image you attached
100px - is how far down the page the image starts

Preview to see it work


Web Studio 5 - How to use a large image to fill the entire screen - by Web Studio Next