Community Forums › Forums › Archived Forums › Design Tips and Tricks › Change bg for Outreach Child Theme
- This topic has 11 replies, 2 voices, and was last updated 10 years, 6 months ago by rosemcafee.
-
AuthorPosts
-
October 13, 2013 at 6:36 pm #66560rosemcafeeMember
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!
October 13, 2013 at 8:33 pm #66563stinkykongParticipantAll 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 yourbody
tag or to your#wrap
.
Web Design by Websentia Web Services
http://websentia.comOctober 14, 2013 at 1:15 am #66588rosemcafeeMemberThank you so much. I appreciate the fast response and the effective (easy) suggestions.
October 14, 2013 at 2:37 am #66593rosemcafeeMemberI'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;
}October 14, 2013 at 3:14 am #66596rosemcafeeMemberI was able to change to full color bg but i would appreciate any input on how to use a background image instead. Thanks!
October 14, 2013 at 4:40 am #66605stinkykongParticipantIf 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.comOctober 14, 2013 at 11:42 am #66678rosemcafeeMemberit is not active yet but im working on http://www.mcafeesolutions.com
I only uploaded the picture through the media uploader in the WP dashboardOctober 14, 2013 at 11:46 am #66680stinkykongParticipantOk, 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.comOctober 14, 2013 at 12:25 pm #66687rosemcafeeMemberThank 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.
October 14, 2013 at 11:34 pm #66761rosemcafeeMemberIs it too much to ask for codes to make the (image) background responsive?
October 15, 2013 at 4:15 am #66785stinkykongParticipantIt'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.comOctober 15, 2013 at 6:05 am #66805rosemcafeeMemberWow. I'm impressed with the generosity in this forum. Thank you so much.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.