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

Screen wide bars

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

This uses a "glossy bar" image tile and repeats it across the screen width like I use at the top
I made a few that you can use but they are easy to find on the internet

Click on one of the bars to see it in the example, right click any bar below to save if you'd like to use one of these.

Glossy / Navigation Bar Image tiles
These are all only a few bytes, I just cropped these from a picture I found and made them into png's
They are also easy to make, there are tutorials for most art programs
There is also an online generator here: Glass Button Generator

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

<div id="bar"></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">
#bar{position:absolute; left:0px; width:100%; z-index:0;
background: url(blackbar.png) repeat-x;

Customize the Code

blackbar.png - is the name of the bar you attached
100px - is how far down the page the bar starts
44px - is the height of your bar

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 on top of these or just use them as dividers.
If you use more than one change id=bar and #bar to id=bar2 and #bar2
You can use the same tiny image for the entire website
I use the bar image tile as a HTML object as placeholder and stretch it wider,
those placeholders don't get uploaded and are for doing stuff like this in web studio.
A neat tip you may not know, if you just place one of the tiny bars on your page
you can drag it wider, webstudio will repeat it for you, it just won't be full width.


Web Studio 5 - How to add a bar to go as wide as the computer screen - by Web Studio Next