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

Repeating - 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 uses a tiny "image tile" for a division background and repeats it to the screen width
You can search the internet for background tile to use with this method

Click on one of the image tiles to see it in the example

All the images I'm using for the example are under 1KB you can find many patterns and sizes
It's one way to add a little interest to your page I use one for the footer background

Attach your image tile to "website properties"
and change the name in the code

<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(image.png);

Customize the Code

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

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.
Try to find or make a background tile that doesn't compete with the content on top of it
If you use more than one change id=banner and #banner to id=banner2 and #banner2
You can place repeating image tiles directly into web studio for entire pages


Web Studio 5 - How to use repeating images to go as wide as the computer screen - by Web Studio Next