Thread: CSS Background

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0

    CSS Background


    I have been banging my head this one and cannot figure it out.

    On the home page I would like the content area to have a back background. On the homepage only this is broken up by boxes displaying content. I cannot find where or how to make the changes so the entire content area has a black background.

    Site nmclippers (dot) com

    css page nmclippers.com/wp-content/themes/hero/style.css

    Any help is appreciated, thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    306
    Rep Power
    6
    Hello,

    this can be easily done by adding another div to contain the content area. For example:

    Add
    <div id="contentWrapper"> right above <div id="home-container">
    and then add the closing div tag just above <div id="footer"> like so.

    <div id="contentWrapper">
    <div id="home-container">

    </div>
    <div id="footer">

    Then simply style it with CSS. The contentWrapper div will contain all the content in the middle and will allow you to easily add the background color and etc...


    Hope this helps

    Comments on this post

    • mark5225 agrees : Helped solve my problem, thanks.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    Thanks tech, worked great. Such a simple answer that did the job.

    However, I have a div clear tag that is creating a space just above the footer where the background image comes through. I tried removing the div clear but then the boxes above allow the background image to show in a small space. I tried to add a background: black to the div clear but didn't do anything.

    Only take a look if you have time, but thanks a million for the answer thus far.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    306
    Rep Power
    6
    Thanks! Glad to help

    Change This:


    Code:
    #wrapper {
        margin: 30px auto;
        position: relative;
    }
    TO this:


    Code:
    #wrapper {
        margin: 30px auto 0;
        position: relative;
    }
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    That did it!

    I never would have figured that out. Hours of me tweaking code by trial and error you solved in minutes

    Thank you again.

    Now back to trying to figure out PHP ... lol
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    306
    Rep Power
    6

IMN logo majestic logo threadwatch logo seochat tools logo