Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Jan 2013
    Posts
    7
    Member #
    34478
    I am having an issue adding a background behind my page.
    This issue is best explained through images. Right now here is an example of what my website looks like so far:

    http://imageshack.us/a/img835/6745/noback.png

    Now this is what i would like to add to my website template. (The part in Blue on the left and right sides) A background behind the rest of my white page. that stays fixed even when i scroll.
    Example Here:
    http://imageshack.us/a/img824/399/backrc.png

    Is there a specific HTML code to use? if so were would i add it. thank you to anyone that can help

  2.  

  3. #2
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Actually, the first image looks pretty dang good. B+W simplistic. Love it.

    Your content is in a white container. That container is put on top of another container/body. Without looking at the code, I can't be sure, but try add this to your CSS:

    body {background-color: #336699}

    If you want to use a fixed bg image, you will do this:

    body {background:url("images/background.jpg") no-repeat fixed; }

    And if you need the image to stretch to fill the screen (not work in IE8):

    body {background-size: cover}

    -R

  4. #3
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Actually, sorry, I did not see that the first picture spanned the entire width. You need to find the id or class of that container (I suggest firebug plugin for Firefox or Chrome F12) and then change it. It will look something like this:

    #container {width:960px; margin: 0 auto}

    960px is a common website width standard. Margin 0 auto centers a block relative to it's parent.

    -R


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:32 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com