Color Coded Stylesheet Help
May 30, 2020, 10:49:31 am
Welcome, Guest. Please login or register.

Login with username, password and session length
 
  Home Help Search Arcade Gallery Links Staff List Calendar Members Login Register  

Background Image Tips


Pages: [1]
  Print  
Author Topic: Background Image Tips  (Read 542 times)
simply sibyl
Administrator
*****
Posts: 35



View Profile
« on: December 11, 2007, 02:27:08 pm »

To begin with w3schools has all the information you need on this page for putting backgrounds in css:
http://www.w3schools.com/css/css_background.asp



To add/change your background image for your forum.

1.  Admin >  Manage Styles

Are you using the Default Style?  (the style you see here at Support)    If not skip to step 3

2.  Click Create Style
    Type in a name for your style,  scroll to the bottom and save.

3.  Click Modify Style
    Choose your stylesheet in the dropdown box

4.  Scroll to the bottom to where the css is
    Look for this section in the css

Code:

     /* The main body of the entire forum. */
body
{
             background-color: #E5E5E8;
             margin: 0px;
             padding: 12px 30px 4px 30px;
}




The two most common ways to use a background:

1.  To add a background that repeats horizontally and vertically:
     Change #E5E5E8 to a color that matchs your background image.
     The image is set to "repeat" so that it will repeat (tile) on the entire page.
     Put your background image url in as shown below:

Code:

     /* The main body of the entire forum. */
body
{
            background-color: #E5E5E8;
            background-image: url(PUT YOUR BACKGROUND IMAGE URL HERE);
            background-repeat: repeat;
            margin: 0px;
            padding: 12px 30px 4px 30px;
}



2.  To add a background that is "fixed"
     (A fixed background image will not move as the page is scrolled, your forum will "slide" over the top of the
      background)
     Change #E5E5E8 to a color that matchs your background image.
     The image is set to "repeat" so that it will repeat (tile) on the entire page.
     (If using a large image (not recommended) change it to no-repeat)
     The image is set to "fixed"

     Put your background image url in as shown below:

Code:

     /* The main body of the entire forum. */
body
{
             background-color: #E5E5E8;
             background-image: url(PUT YOUR BACKGROUND IMAGE URL HERE);
             background-repeat: repeat;
             background-attachment: fixed;
             margin: 0px;
             padding: 12px 30px 4px 30px;
}


 



Want to do something different?
Lets do some background positioning.

Have an image you want to set in a specific position on the background?

Let's make the background grey, then center a white oval on it.

Here is how that would look:   http://members.cox.net/mysmileyplace/backgrounds/centeredandfixed.html
The white oval image is the background image.
It is centered on a grey background color. 
Your forum would slide over the top of this.   

To do this:
We change #E5E5E8 to the color we want to use (in this case a grey shade)
Put your background image url in as shown below.
We do not want to repeat the oval image so we set it to "no-repeat"
We are going to center the oval,  so the position is set to "center"

Code:

     /* The main body of the entire forum. */
body
{
             background-color: #E5E5E8;
             background-image: url(PUT YOUR BACKGROUND IMAGE URL HERE);
             background-attachment: fixed;
             background-repeat: no-repeat;
             background-position:  center;
             margin: 0px;
             padding: 12px 30px 4px 30px;
}


 
An image can be set to  any position on the page.   

Go here for information on background image positioning: http://www.w3schools.com/css/pr_background-position.asp
Report Spam   Logged

Share on Facebook Share on Twitter



Pages: [1]
  Print  
 
Jump to:  

Bookmark this site! | Upgrade This Forum
SMF For Free - Create your own Forum
Powered by SMF | SMF © 2016, Simple Machines
Privacy Policy