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

Colored - screen wide background divisions

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

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

A generator to change the color and add it to the copy/paste code

A division with a css color uses no images so they load quickly since they are such a small download
They are a good option to using a full page repeating image. You can see more about backgrounds in the CSS section
You can use as many colored divisions as your page needs, I use these for the black banner at the top.

<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;

Customize the Code

black - is the color
110px - is how far down the page the division starts
170px - is the height of the division

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


If you use more than one change id=banner and #banner to id=banner2 and #banner2
You can also add borders and shadows like the example above, see the CSS section for that.
You can place text or other images on top of these.
You can use a draw shape the height of your screen wide division while working and delete it
OR you can use a small colored image (gif) see HTML object as placeholder that doesn't get uploaded.


background color:

Web Studio 5 - How to make screen wide colored background divisions - by Web Studio Next