Change bg for Outreach Child Theme

Community Forums Forums Design Tips and Tricks Change bg for Outreach Child Theme

This topic is: resolved

This topic contains 11 replies, has 2 voices, and was last updated by  rosemcafee 1 year ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #66560

    rosemcafee
    Participant
    Post count: 15

    Outreach bg layout is divided into different modules. How do I change the background to one full image (or maybe just color). I tried changing the bg one at a time and had a hard time with the header image part. I am not very keen with the technical jargons. Any help is appreciated. Thanks!

    #66563

    stinkykong
    Participant
    Post count: 169

    All themes pre-HTML5 (not labeled “Pro”) have the same basic set of named divs or modules as you call them. Some themes, such as Outreach, have the the divs for the header, the nav bar, the page content, the footer-widgets, and the footer (Outreach adds a “sub-footer”) all at full width which means their backgrounds reach across the whole page, sometimes with the image positioned as centered.

    Other themes assign a width to the “#wrap” div that contains all the above which constrains the backgrounds of those divs to the assigned width, which would be roughly 1060px in Outreach.

    So, in style.css, if you find all the divs you want to not show a background such as #header, #nav, and #inner in your case, you can comment out their background rules by putting /* before them and */ after them, their backgrounds will go away. Then you can add your single background image either to your body tag or to your #wrap .


    Web Design by Websentia Web Services
    http://websentia.com

    • This reply was modified 1 year ago by  stinkykong.
    • This reply was modified 1 year ago by  stinkykong.
    • This reply was modified 1 year ago by  stinkykong.
    • This reply was modified 1 year ago by  stinkykong.
    #66588

    rosemcafee
    Participant
    Post count: 15

    Thank you so much. I appreciate the fast response and the effective (easy) suggestions.

    #66593

    rosemcafee
    Participant
    Post count: 15

    I’ve tried and tried, obviously I’m not a programmer, but i used this simple code i found online to insert my background but it doesn’t work. (codes in the body-tried it in the wrap too) So what am I doing wrong? Thanks again.

    /* Body
    ———————————————————— */

    body {
    background-image: url(images/bg.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;

    }

    ::-moz-selection {
    background-color: #333;
    color: #fff;
    }

    ::selection {
    background-color: #333;
    color: #fff;
    }

    /* Wrap
    ———————————————————— */

    .wrap {
    margin: 0 auto;
    width: 1060px;
    }

    .outreach-landing .wrap {
    width: 760px;
    }

    #66596

    rosemcafee
    Participant
    Post count: 15

    I was able to change to full color bg but i would appreciate any input on how to use a background image instead. Thanks!

    #66605

    stinkykong
    Participant
    Post count: 169

    If you provide a link, I might be able to better help. That looks good to me but it might be where in the CSS file you’re placing that . (Any rule below another would overwrite the one above in the event of a conflict.) So there might be a rule below your example code that reverses what you’re trying to accomplish.

    OR

    You might not have your background image uploaded into the correct folder. Is there a file bg.jpg in the images folder inside your Outreach/images folder?


    Web Design by Websentia Web Services
    http://websentia.com

    #66678

    rosemcafee
    Participant
    Post count: 15

    it is not active yet but im working on http://www.mcafeesolutions.com
    I only uploaded the picture through the media uploader in the WP dashboard

    #66680

    stinkykong
    Participant
    Post count: 169

    Ok, that’s why. You will need to FTP the file into the images folder of your child theme.


    Web Design by Websentia Web Services
    http://websentia.com

    #66687

    rosemcafee
    Participant
    Post count: 15

    Thank you ‘stinkykong’ ! I still have to figure out my FTP coz the password they gave me doesn’t work but i looked in the file manager within hosting and transferred the jpg inside the images folder of Outreach child theme. Now I can put full page image as my background with simple steps you suggested.

    #66761

    rosemcafee
    Participant
    Post count: 15

    Is it too much to ask for codes to make the (image) background responsive?

    #66785

    stinkykong
    Participant
    Post count: 169

    It’s very easy. You should Google search “CSS Background” and learn from sources such as W3Schools because there is so much you can do with backgrounds.

    You’ll have to toy this the %age but the rule would be

    background-size: 100%;

    This refers to the width.

    (edit: this goes in your stylesheet)


    Web Design by Websentia Web Services
    http://websentia.com

    • This reply was modified 1 year ago by  stinkykong.
    • This reply was modified 1 year ago by  stinkykong.
    #66805

    rosemcafee
    Participant
    Post count: 15

    Wow. I’m impressed with the generosity in this forum. Thank you so much.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.