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

Page Background CSS

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

HOW WEB STUDIO DOES BACKGROUNDS
When you choose a color or an image for a page background it is put into the HTML body tag.
We don't do that any longer, now we use CSS and put the code in the HEAD.
The reason is the HEAD loads first in a browser so we want the page background STYLE to load before the HTML.

Web Studio backround images use a repeating code. With CSS we can do more and have it load faster.
You still use a page color for working inside web studio, this just puts the code in the proper place.

Page backgrounds in Web Studio

Faster Loading Background Color

Since browsers load pages in a specific order I use this so my page color loads first.
If you use other css STYLES when you place these in the HEAD you put it at the top

Example

On the HTML tab in "Insert Page HTML"
copy/paste to
"Inside HEAD"

<style type="text/css">
body{background:#2a2a2a;}
</style>

In background change #2a2a2a to match your background color in web studio

TIP: Finding the Background Color in Web Studio

Preview your page, right click on it and use "view source" from the menu
scroll down until you see this:

<body bgcolor="#2a2a2a" style="margin:0 0 1px 0; height:100%">

bgcolor="#2a2a2a2" is the color you are using

Repeating Background Image

Repeats an image horizontal and vertical, typically you would use a backgound image tile
A repeating background tile can be small and very efficient for loading and page size

Example

On the HTML tab in "Insert Page HTML"
copy/paste to
"Inside HEAD"

<style type="text/css">
body{background:#2a2a2a url(bgimage.jpg) ;}
</style>

Image Used

Attach your image
to
"wesite properties"

In background change #2a2a2a to match the background color in web studio
In url change bgimage.jpg to the name of the image you attached

Fixed Background Image

This "fixes" the background in place for a repeating image
Fixed position doesn't work for some smartphones so I wouldn't use it on your mobile page

Example

On the HTML tab in "Insert Page HTML"
copy/paste to
"Inside HEAD"

<style type="text/css">
body{background:#2a2a2a url(bgimage.jpg) fixed;}
</style>

Image Used

Attach your image
to
"wesite properties"

In background change #2a2a2a to match the background color in web studio
In url change bgimage.jpg to the name of the image you attached

Positioning a Background Image

In Web Studio you can just place an image at the back inside the table.
This is how to use background position to put an image left or right in the computer screen outside the table
and place it a specific distance down the page. Careful with the image download size.

Example

On the HTML tab in "Insert Page HTML"
copy/paste to
"Inside HEAD"

<style type="text/css">
body{background:#2a2a2a url(bgimage.jpg) no-repeat 0px 1000px;}
</style>

Attach your image
to
"wesite properties"

In background change #2a2a2a to match the background color

In url change bgimage.jpg to the
name of the image you attached

0px is the distance
over from the LEFT side

1000px is the distance
down from the TOP

TIP: Copy the image name when you attach it and paste that into the code

Big Background Image

<style type="text/css">
body{background:#2a2a2a url(bgimage.jpg) no-repeat center 1000px;}
</style>

<style type="text/css">
body{background:#2a2a2a url(bgimage.jpg) no-repeat right 1000px;}
</style>

Left Background Image

Right Background Image

Thank-you

CSS in Web Studio 5 - Page Background CSS - by Web Studio Next

Vertical Repeating Background Image

This is how to have an image repeat down the screen start at the top and auto center
The Web Studio default size is 1024x768 so the table is 1000px wide which is usually set to center
For the example I made a graphic PNG 1060px wide by 100px high which is only a ½ KB download that repeats

On the HTML tab in "Insert Page HTML"
copy/paste to
"Inside HEAD"

<style type="text/css">
body{background:#2a2a2a url(bgimage.jpg) repeat-y top center;}
</style>

Attach your image
to
"wesite properties"

Example

In background change #2a2a2a to match the background color in web studio
In url change bgimage.jpg to the name of the image you attached

Horizontal Repeating Background Image

This is how to have an image repeat across the screen
A lot of web designers use this for gradients, different patterns or colored bars this example is 10px wide.
You make the image as tall as you need and as wide as you need for your pattern, gradient or colors

On the HTML tab in "Insert Page HTML"
copy/paste to
"Inside HEAD"

<style type="text/css">
body{background:#2a2a2a url(bgimage.jpg) repeat-x 0px 1000px;}
</style>

Attach your image
to
"wesite properties"

Example

In background change #2a2a2a to match the background color in web studio
In url change bgimage.jpg to the name of the image you attached
0px is how far left it starts and 1000px how far down it starts

aaaaaaaaaaaaiii