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

Left Positioned - screen wide image

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

This starts an image on the left with the over flow on the right hidden on smaller screens
The wider the image you use the more computer screen it will cover

This is a smaller version of the image

The image I'm using for the example is 170px X 1282px 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 under 40KB this one is 26KB for example

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

<div id="banner"></div>

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

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

<style type="text/css">
#banner{position:absolute; left:0px; width:100%; z-index:0;
background: url(1.jpg) left center no-repeat;

Customize the Code

1.jpg - is the name of the image you attached
110px - is how far down the page the image starts
170px - is the height of your image

Note: 1003px is for smart phones most don't need to
bother with that.
If you use a larger page than the defaut
size and it's for a mobile website ask me on the forum.

Preview to see it work


You can place text or other images on top of these.
For a link you could place a transparent draw shape over the image and put a link on that.
If you use more than one change id=banner and #banner to id=banner2 and #banner2
The image I used in this example is only 1282px wide you can use wider images to cover more screen sizes


Web Studio 5 - How to use wide images and position them left for a computer screen - by Web Studio Next