Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Coding for multiple backgrounds

    Hi all,

    I've just started using wordpress and am just starting to get the hang of CSS. I'm using the tempera theme, which I like because of the presentation (home) page, but am having trouble making changes to the body of the site.

    What I want is to have a background image, and in front of that have the main page (including header and nav bar) floating on a white background,so that when you scroll the entire page moves, as in this example site:
    http://www.alexikenney.com/events/

    I want it to look essentially like that, but with the side margins the background image instead of a color.

    I'm having trouble getting the background image to show up in the body (though as you can see I was able to put it inside the main content area). I tried body{#body {background-image: url('sample.jpg')} but nothing shows up. I also don't even know where to begin on putting the floating white background in front of this. Any and all help is appreciated!

    Here is my site:
    http://www.josephgotoff.com

    Thanks in advance!

  • #2
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Without seeing the code, try setting the bg image in the css ad follows:
    html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    background-size: cover;
    }
    Then in the css, set the body width to 80%, or 800px for example:
    body {
    width: 80%
    }
    Then, in the html, just after <body>, put in a new element, <div id=white_bg>. Don't forget to close the div, </div>, at the bottom of the html doc, just above </body>. In the css, add a rule
    #white_bg {
    background-color: white;
    top: 0;
    }

    Let me know if this works.

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Correction: it should be <div id="white_bg"> with quotation marks.

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Winthropite! I will give that a try today and let you know how it goes.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •