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

Percentage - 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 and then makes it a percentage of the screen width
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 1600px 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 22KB 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:relative; left:0px; margin:0 auto; z-index:0;
min-width:1003px;
background: url(1.jpg) center no-repeat;
width:94%;
top:110px;
height:170px;
}
</style>

Customize the Code

1.jpg - is the name of the image you attached
94% - is the pecentage the image will stretch to
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
When a smaller screen is used the image centers in the container but a wider image works best on large screens
Make your browser window smaller you'll see how the image will stay to 94% in this case until it gets to 1300px

Thank-you

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

aaaaaaaaaaaaiii