hockpunk426 0 Report post Posted June 2, 2012 I am trying to place a "Content Background" color and use a "Background Image". However as answered in this thread http://www.pagelines.com/forum/discussion/19846/background-image-issue#Item_5 you can't use both without custom code. This is the code I came up with but I am still having troubles. Can anyone see if I have made an error? This is the code... .canvas .page-canvas, .thepage .content, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even {background-color: #362416;} .canvas #page, .full_width #page, body.fixed_width { background-position: 43% 18%; } .canvas #page, .full_width #page, body.fixed_width { background-attachment: scroll; } .canvas #page, .full_width #page, body.fixed_width { background-repeat: no-repeat; } .canvas #page, .full_width #page, body.fixed_width { background-image: url("http://saviwebdesign.com/wp-content/uploads/2012/06/Bottom4.png"; } The site is www.saviwebdesign.com Share this post Link to post Share on other sites
catrina 103 Report post Posted June 2, 2012 [code].canvas #page, .full_width #page, body.fixed_width { background-position: 43% 18%; } .canvas #page, .full_width #page, body.fixed_width { background-attachment: scroll; } .canvas #page, .full_width #page, body.fixed_width { background-repeat: no-repeat; } .canvas #page, .full_width #page, body.fixed_width { background-image: url("http://saviwebdesign.com/wp-content/uploads/2012/06/Bottom4.png"; }[/code] ^^^ You can combine the above code into one like this: [code].canvas #page, .full_width #page, body.fixed_width { background-position: 43% 18%; background-attachment: scroll; background-image: url("http://saviwebdesign.com/wp-content/uploads/2012/06/Bottom4.png"; }[/code] I'm just wondering: why do you want to use a background color if the background image is going to cover it? Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites
hockpunk426 0 Report post Posted June 2, 2012 I just put the CSS like that because I copied it from Firebug. [code].canvas .page-canvas, .thepage .content, .sf-menu li, #primary-nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .commentlist ul.children .even {background-color: #362416;} .canvas #page, .full_width #page, body.fixed_width { background-position: 43% 18%; background-attachment: scroll; background-image: url("http://saviwebdesign.com/wp-content/uploads/2012/06/Bottom4.png"; }[/code] The background image is mainly transparent, its made to use the background color. I plan on doing a type of dynamic CSS where the click of a button will change the style of the whole site however i don't want to have to make a new image for each of the styles. Share this post Link to post Share on other sites
catrina 103 Report post Posted June 2, 2012 Ohhh, I see. Try adding this background-color attribute after the background-image property in the CSS to see if it works: [code]background-color: #xxxxxx;[/code] Change the hex code to your color. Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites
hockpunk426 0 Report post Posted June 2, 2012 That didn't work. Looks like that just changed the body color so the whole site is the same color now. Share this post Link to post Share on other sites
hockpunk426 0 Report post Posted June 2, 2012 Maybe it would be easier to just change the background image and build the color into it. I suppose that would be less coding since I wouldn't have to change the position of the image. How would you suggest doing it? Share this post Link to post Share on other sites
catrina 103 Report post Posted June 2, 2012 If you're going to build the color into it, I assume you'd need to add the background color to the back in an image editing program (Photoshop) and add the image as a layer above it (but make sure its opacity is changed so that you can see through it and see the background color). Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites
hockpunk426 0 Report post Posted June 3, 2012 Ok so I have adjusted the website to how I want it to look. I would like the brown background to continue down to the bottom of the page just below the footer. How would I go about achieving this? The nice part of setting of a background-color is that it's dynamic so it doesn't matter how much is on the page. I have never setup an image like this. Is there a trick to continuing the color to the bottom? Share this post Link to post Share on other sites
Danny+ 1,327 Report post Posted June 3, 2012 Hi, I highly recommend you install either Firebug or start using Google/Safari's web developer tool, this will allow you to inspect your websites HTML/CSS and make you life so much easier to style it the way you want. Anyway, remove that code you have for your background image and replace it with the one below. [code].page-canvas {background-image: url(http://saviwebdesign.com/wp-content/uploads/2012/06/SaviBody1.jpg);background-repeat: no-repeat;background-position: 48% 13%;background-color: #352217;}[/code] Please search our forums, before posting! Share this post Link to post Share on other sites
hockpunk426 0 Report post Posted June 3, 2012 I use Firebug a lot with other websites. The only time I have trouble is when using page lines. Its strange not using my own CSS. That code did not work. This is all my custom code. This issue is the only issue I have had so far and its driving me crazy, all I want to do is match my header with my body and allow the color to continue down the page. [code]/*This center the header to where there are no margins*/ img.mainlogo-img {width: 980px; margin-left: 0px; margin-top: -25px; margin-bottom: -25px;} /*Allows real size header*/ .fixed_width #branding .content-pad { padding-bottom: 25px; padding-left: 0px; padding-right: 0px; padding-top: 25px; } /*Allows you to edit your nav menu*/ .main_nav ul li { background-image: url("http://saviwebdesign.com/wp-content/uploads/2012/06/Nav.jpg"); .page-canvas {background-image: url(http://saviwebdesign.com/wp-content/uploads/2012/06/SaviBody.jpg);background-repeat: no-repeat;background-position: 48% 13%;background-color: #352217;}[/code] Share this post Link to post Share on other sites
hockpunk426 0 Report post Posted June 3, 2012 Changing the code in Firebug I get this. [code].page-canvas { background-color: #352217; background-image: url("http://saviwebdesign.com/wp-content/uploads/2012/06/SaviBody.jpg"); background-position: 12% 18%; background-repeat: no-repeat; margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 0; }[/code] However when I put this into my custom CSS section it doesn't work. Share this post Link to post Share on other sites
hockpunk426 0 Report post Posted June 3, 2012 Never mInd I changed its position and it works just fine now. [code]/*This center the header to where there are no margins*/ img.mainlogo-img {width: 980px; margin-left: 0px; margin-top: -25px; margin-bottom: -25px;} /*Allows real size header*/ .fixed_width #branding .content-pad { padding-bottom: 25px; padding-left: 0px; padding-right: 0px; padding-top: 25px; } .page-canvas { background-color: #352217; background-image: url("http://saviwebdesign.com/wp-content/uploads/2012/06/SaviBody.jpg"); background-position: 12% 18%; background-repeat: no-repeat; margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 0; } /*Allows you to edit your nav menu*/ .main_nav ul li { background-image: url("http://saviwebdesign.com/wp-content/uploads/2012/06/Nav.jpg"); [/code] Thanks for the help. Share this post Link to post Share on other sites
catrina 103 Report post Posted June 3, 2012 Okay, great. Please read the docs before posting. Please do not private message me unless I ask you to. Designer | Catrina Dulay Founder | Catrina and Mouse Share this post Link to post Share on other sites