Background Image and Color

[hockpunk426 0]

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

[catrina 103]

[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?

[hockpunk426 0]

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.

[catrina 103]

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.

[hockpunk426 0]

That didn't work. Looks like that just changed the body color so the whole site is the same color now.

[hockpunk426 0]

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?

[catrina 103]

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).

[hockpunk426 0]

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?

[Danny+ 1,327]

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]

[hockpunk426 0]

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]

[hockpunk426 0]

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.

[hockpunk426 0]

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.

[catrina 103]

Okay, great.