Jump to content
Sign in to follow this  
hockpunk426

Background Image and Color

Recommended Posts

hockpunk426

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×