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

The Screenwide Category

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

IMAGES IN WEB STUDIO
Images can be the main reason a website can be slow to load.
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 for lower band internet connections

Single wide image options for banners

• 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 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 starts an image on the left with the over flow on the right hidden
• The wider the image you use the more computer screen it will cover

• 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

• Screen wide links on Web Studio Next with descriptions, (this page).

No image color banners - tiling small image banners - repeating small image banners

• Description of future link

• Description of future link

• This uses a "glossy bar" image tile and repeats it across the screen width
• I use a bar at the top where I place the H1 page heading for seo

• This uses a tiny "image tile" for a background and repeats it to the screen width
• Tiles are images made to repeat like this, a search can turn up many to use.

• This places a division that you can make any color as part of a background
• These use no images and you can add as many as you need

Multiple image screenwide slideshows with small fast loading code specifically made for banners

• Fades and centers same size images, the over flow on both ends are hidden
• Uses full slideshow coding to add captions, pause, next and previous buttons

• Fades and left positions the same size linked images, the right sides are hidden
• The wider the images you use the more computer screen the slideshow covers

• Fades, centers same size images and adds captions. The image sides are hidden
• The wider the images you use the more computer screen the slideshow covers

• Slides and left positions same size images, the over flow on the right is hidden
• The wider the images you use the more computer screen the slideshow covers

• Fades and centers same size images, the over flow on both ends are hidden
• The wider the images you use the more computer screen the slideshow covers

Other Screenwide links on Web Studio Next

Where to find other screenwide effects

• On this page you'll find a fixed background that can be used under banners
• Use that for a screenwide background then have banners scroll over the top

• This repeats an image across the screen so it goes screenwide for backgrounds
• You could use an image that isn't as tall then use banners over it

• This is mainly for footers but it does go screenwide
• Uses a button that sticks to the bottom and slides up a hidden footer

• This method uses a web studio page that loads into a screenwide iFrame
• That allows you to use one page for the entire website that can be updated
• You can change the top position to use those in the same way as these banners

Thank-you

Web Studio Next - Screenwide Images - For use in Web Studio 5

aaaaaaaaaaaaiii