Adding a background image

Hello There,

This theme does not come, at least I do not think so, with a background image theme option or settings to change one.

Please advise on how to add on. I am guessing from the CSS but not sure.

Thanks,

Jason

  • Jason

    Ok, I got it. I had created a child theme so i just added

    body {
    font-family: helventica, arial !important;
    font-size: 100%;
    color: grey;
    background-image:url('http://www.avatarsky.com/background/thumb/pattern/background-pattern-007.jpg');
    margin: 0px;
    padding: 0px;
    }

    So it looked like

    /*
    Theme Name:     HU CEACS
    Description:    main site
    Author:         Jason Alexis
    Template:       bp-corporate
    
    (optional values you can add: Theme URI, Author URI, Version)
    */
    
    @import url("../bp-corporate/style.css");
    body {
    font-family: helventica, arial !important;
    font-size: 100%;
    color: grey;
    background-image:url('http://www.avatarsky.com/background/thumb/pattern/background-pattern-007.jpg');
    margin: 0px;
    padding: 0px;
    }

    I still have a question though about the the background image versus the content area background...how do u so something different there to include main areas

  • DavidM

    Hiya infotechd,

    Sounds like you've gotten pretty far along on this already!

    I think what you're looking to do, create an overlay of any sort, would best be done by adding a <div> of your own and likely in this case, specifying absolute coordinates for it.

    So for instance, you might add the <div> somewhere in the theme's header.php file (which you can copy over to the child theme to keep it upgrade safe), something like so:
    <div id="overlay"></div>

    Then in your child theme's stylesheet you could style it, perhaps like so:

    div#overlay {
    position: absolute;
    top: 0px;
    height: 200px;
    width: 200px
    background-image:url('http://www.avatarsky.com/background/thumb/pattern/background-pattern-007.jpg');
    }

    While this involves customization outside of what we're able to assist with by way of support here, I believe that's basically what you'd be looking to do.

    Cheers,
    David

  • Jason

    Hello David,

    I think I used the wrong word.

    I basically want to create 2 backgrounds. The main that is handled by the code shown in my example that is not fixed, but then to put another background (header background effect) on top of this base background).

    I want the base background to repeat vertically which I figure out already. then I will fix this second background (above the base) to a fixed position at the top.

    I think I read somewhere that with ccs3, this can be easily done but was hoping could have done the same with this template.

    Thanks,

    Jason

  • Richie_KS

    hi jason
    you can't add 2 images to the body but here's some tweak.

    open header.php after <body> add this <div id="secbody">
    open footer.php before end </body> add this </div>

    now add this css to your child-theme css

    #secbody {
    width: 100%;
    float:left;
    background: transparent url(' THE HEADER IMAGE FULL URL ') repeat-x top left;
    }

    that should overlay the #secbody bg image after body bg image.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.