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

Fluid - 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 re-sizes it (makes it "fluid") to computer screens
With fluid images the height changes so you need to account for that in layout, this can overlap for example

This is a smaller version of the image

The image I'm using for the example is 170px X 1240px if you re-size your browser window you'll see the image re-size (to 1003px)
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 33KB for example

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

<img class="banner" src="1.jpg" alt="" />

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; width: 100%; z-index:0;
min-width: 1003px;

Customize the Code

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

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


Since these change size to each computer screen they aren't the best method for banners.
You use a larger image because on larger screens these can pixelate when re-sizing larger
For a link you can wrap the image in an anchor tag like below, for more on links see the CSS section.

<A href="index.html"> <img class="banner" src="1.jpg" alt="" /> </A>

If you were thinking this would be a good for full page backgrounds there are better ways in the CSS or Full Screen Sections


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