Author Topic: Stop background image from scrolling (FIXED background)  (Read 10840 times)

Offline hidden

  • Sami
  • Administrator
  • Senior Member
  • *****
  • Posts: 5921
  • Not a geek. Just a Nerd.
    • CSB Tutorials
Stop background image from scrolling (FIXED background)
« on: March 06, 2007, 08:38:51 PM »
(You can do this to your Page Layout to cause MANY pages to change or just do it to ONE page.)

Set your background color and image in CSB.
Right click on page, Properties, Page Area, Background

Set the plain color to the something similar to the picture.  If you have a red image, then choose a plain red for your background color too.

Publish. 
Even when you check the box to NOT scroll, unfortunately the image will still scroll in at least Firefox.

Open your web page in a browser window.  Choose VIEW SOURCE from the toolbar. 
Look for your background code that CSB created.  Will look something like this:

Code: [Select]
<BODY BGCOLOR="#CCCCE4" TEXT="#080000" bgproperties="fixed" background="46750503.jpg" LINK="#000066" ALINK="#660099" VLINK="#660099">
Yours may be a bit different based on your settings.
My background color is BGCOLOR="#CCCCE4".
Notice that the background image name is changed by CSB to a code number.
Mine is background="46750503.jpg
You will use YOUR image name in the code below.


PLACE THE FOLLOWING CODE INTO AN INSERT HTML BOX NEAR THE TOP OF YOUR WEB PAGE:

Code: [Select]
<style type="text/css">
body
{
background: #CCCCE4 url('46750503.jpg') repeat-y fixed top left;
}
</style>


Grab the code from above.
Change the part of the code in Blue to the background color
Change the part of the code in Red to your background image.

<style type="text/css">
body
{
background: #CCCCE4 url('46750503.jpg') repeat-y fixed top left;
}
</style>

This code works in Internet Explorer and Firefox to cause a plain color to appear first, then your background image in a FIXED position.
It is set to repeat only vertically (repeat-y).
If you want it to repeat only horizontally, change it (repeat-x).
If you want your image to repeat going vertically AND horizontally at the same time then just make the code say repeat.
« Last Edit: March 06, 2007, 08:48:23 PM by Samrc »
-Samantha
TNG: "Sometimes, you can make no mistakes, do everything right, and still lose" - Capt Picard to Data
(:turtle: In memory of Turtle: May 22, 1944 - Nov 24, 2007  GURU, mentor, and really nice guy! :turtleleft: )