VoyForums: Backgrounds

[ Show ]

Support VoyForums

[ Shrink ]

VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

BACKGROUNDS (Basic Tutorial):
This page will focus on the various methods of creating a background for your website.

In this case, Voy forums makes it easy!.
Go To their General Settings, and this option's listing is URL to Background image.
Yet obviously, most websites and blogs don't offer this simplistic method.

------------
Here's one simple technique for creating a background:
First, choose an Image.
(seamless images are preferred!!, but any Photo can theoretically be used.)
For example: http://3.bp.blogspot.com/-wbtTjB9m0W8/UX8vYALSghI/AAAAAAAADkU/2X3fLT4YU0s/s320/image.jklpg.jpg

Then, implement this sequence for creating a background:
<body background="http://Place_URL_Here" ></body>

Thus, when a picture is added; it will look like this:
<body background="http://3.bp.blogspot.com/-wbtTjB9m0W8/UX8vYALSghI/AAAAAAAADkU/2X3fLT4YU0s/s320/image.jklpg.jpg" ></body>

Unfortunately; many websites require users to place this code in the header, above the <body>,
OR, it must be placed far at the website's bottom.
And, for many blogs; this trick doesn't work at all.
(Luckily, Here on this forum; our background code can be placed everywhere).
So, it depends upon the blog.

Also note:
added features may also be included.
But, this Basic Tutorial will notfocus on them.
But, the example below shows how things could be added...
(although often, the IMAGE URL provides options to re-size the background. such as HERE.
So, various features could be added, sometime in the future. Please Research:
here's an example: (a flimsy example!)
<body background="http://Place_URL_Here" width="500" height="500" alt="background33_top"></body>

Next, here's another method which keeps the background stationary;
while the foreground moves:

<STYLE TYPE="text/css"> BODY {background-image: url(http://URL_IMAGE_HERE ); background-repeat: repeat; background-attachment: fixed;} </STYLE>

and, this concludes the basic tutorial.

Let's now review websites which create better features.... using advanced CSS!!!
Active Jump Css3.info DavidShariff Stackoverflow Stackoverflow/ transparent W3
W3Schools(1) W3Schools (2) W3 Schools (3)

Here's one way of writing the CSS Code:

while others would choose a different approach

<STYLE TYPE="text/css"> BODY {background-image: url(http://URL_IMAGE_HERE ); background-repeat: repeat; background-attachment: fixed; } </STYLE>

(There's several different ways of writing the same exact code)
<STYLE TYPE="text/css"> BODY { background-image: url(http://URL_IMAGE_HERE ); background-repeat: repeat; background-attachment: fixed; } </STYLE>

the repeat values can be altered in various ways.
W3 Schools has the best listing available:
repeat→ The background image will be repeated both vertically and horizontally.
This is default

repeat-x→ The background image will be repeated only horizontally

repeat-y→ The background image will be repeated only vertically

no-repeat→ The background-image will not be repeated

plus, there are 2 additional variables:
initial → Sets this property to its default value.

inherit→ Inherits this property from its parent element.

also, the background-attachment property can be either Fixed or Scroll.

here are examples of a FIXED background:
voy/240004 | voy/240008 | voy/230250 | voy/238891 | voy/230080

(notice how the background remains stationary. It doesn't move).
even when you scroll down the page, the background stays-in-place.

here are examples of scroll backgrounds
voy/230050 | voy/230150 | Title Of Link | Title Of Link | Title Of Link

Notice how the background moves along, when you scroll down the page.
back during the Internet's earlier days, most websites had scrolling backgrounds.