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

Centered - 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 centers an image with the over flow on both ends 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

SCREEN WIDE IMAGES
The image I'm using for the example is 170px X 2010px 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;
min-width:1003px;
background: url(1.jpg) center no-repeat;
top:110px;
height:170px;
}
</style>

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

TIPS:

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
You can split up large images and mix these with wide screen slideshows for some interesting effects

Thank-you

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

aaaaaaaaaaaaiii