This article contains HTML code that you can use to make design changes to your background. You can keep your background from scrolling or tiling and there are additional options at the bottom of the article for creating horizontal and vertical effects.
If you want to create a background that will not scroll or tile, do this
To keep your background from scrolling:
-
Go to the ‘HTML’ Tab
-
In the ‘Insert Page HTML’ Group click ‘Inside Head’
-
Paste the HTML Below in the ‘HTML Editior’ screen
-
Do this for every page you DO NOT want the background to scroll:
<STYLE TYPE="text/css">
<!--body
{
background-repeat: repeat;
background-attachment: fixed;
background-position: center;
}
-->
</STYLE>
To keep the background centered and not tiled:
-
Go to the ‘HTML’ Tab
-
In the ‘Inside Page HTML’ Group click ‘Inside Head’
-
Paste the HTML Below in the ‘HTML Editior’ screen
-
Do this for every page you DO NOT want the background to tile:
<STYLE TYPE="text/css">
<!--body
{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
-->
</STYLE>
Note: You must view the background in Preview>Preview this Page in order to see how it will look.
————————————————————————————————-
Other options:
Repeat horizontally or vertically:
In the above HTML code, change
background-repeat: repeat;
* to the following code to make it repeat horizontally
background-repeat: repeat-x;
* to the following code to make it repeat vertically
background-repeat: repeat-y;
Change position:
In the above HTML code, change
background-position: left;
* or leave background-position: center; out all together. This in conjunction with
background-repeat-y;
* will make it tile vertically on the left side like this:
Make the background scroll with the text and images
background-attachment: fixed;
This code keeps the background from scrolling with the text and images on your site. You can delete that if you want the background to move with the rest of your site whe you scroll.
This code works great
Can you gives us the real secret weapon i.e. how to make that graphic background always go to the right edge of the users screen regardless of their screen size???
Are you referring to a specific graphic background on one of our sites, or speaking in general? In the example of our header graphic here, I am using the following CSS style code:
That is basically a shorthand for:
What we did was use the above CSS code in conjunction with a very very wide graphic. What happens is that the graphic will not cause a scrollbar in the browser, but if the browser window is resized, it will display more and more of the image, until the window is wider than the background image. For us, I believe it is 1300pixels wide. So after a browser window is wider than that, it will simply stay centered in the window.
Further, this graphic is not the page’s background, but rather the background of a specific
, or page division. That is to say, pages can have backgrounds, but also page divisions can have backgrounds as well.The same effect as our header graphic can easily be done by attaching a graphic to your website using Website Properties > Attached files, and then attach the following code to your page in the HTML Tab > Page HTML > Inside HEAD. This style will take control of the div called “ctrdiv” and it will put a centered image into the top of the page and stay centered with your page. Just remember to replace the
url()with your domain name, slash, the name of the file you attached. Also, for this to work, you must have at least one object on your page (otherwise #ctrdiv isn’t there, and your image won’t be applied to it)I was referring to both a background and a banner.
See http://www.energycreditcard.com
In addition to no scrolling which is so cool, I’d like the right side of the background and banner to always end at the right side of the users screen.
1. Looks like your website isn’t “centered” so any additional CSS style code that is acting on #ctrdiv isn’t going to do anything.
2. In order for the background to end at the right side of the browser, you’ll have to use a graphic that is as wide as the widest browser window you expect the site to be viewed in. In other words, the browser can’t scale the graphic in the manner you want it to. It can only hide the overflow. Hence the strategy many designers employ which is to use a graphic that can either be repeated along the X axis, or to use a wider graphic and employ the strategy in the previous comment. It’s a browser limitation.
I felt that centering the page made things worse.
So assuming I continue to keep everyting to the left, at what point on the right side should I end my background pitcure and all of my banners?
You’ll have to post this on the forum as this thread is now getting to be a little off topic from the original post. Check out http://www.webstudioforum.com
When using a fixed css background you can get a little more control using percentages.
49% is left/right 50% up/down
Sorry it took the code out of my reply and I can’t find where it shows you how to place HTML examples so I best just stick to the Forum.
The answer is here:
http://webstudioforum.com/viewtopic.php?topic=21035&forum=24