Jump to content
Sign in to follow this  
ngudan

How to have two backgrounds (one for header and one for main page area)

Recommended Posts

ngudan

Hi guys, I'd like to know how to have two backgrounds so that I can create a certain effect. My current site is: www.imaintainproperty.com.au/imaintain My aim is to have the site look like this at the header: http://www.imaintainproperty.com.au/imaintain/wp-content/uploads/2011/09/header_sample.jpg The goal is to have a curved canvas at the top with shadow running continuously throughout the site. Any ideas on how to do this or whether there is an easier way? Thanks guys!

Share this post


Link to post
Share on other sites
catrina
It looks like you've already set up the curved canvas and now it just needs the top shadow around it. Did you create the images using Photoshop?

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
mstmarie1
This is going to require redoing your images and not using the BrandNav section in favor of the separate Branding and Navigation sections. Take the shadow out of the blue background. Separate the branding image into 2 parts, the upper portion the curved part adding a shadow, the lower portion into the rest. Expand your page width by 20px by adding padding, then creating a full width transparent background with the shadow affect on the edges. It's not going to be easy by any means, and I don't think I can translate exactly what needs to be done in a short forum post.

Share this post


Link to post
Share on other sites
ngudan
Thanks for the feedback guys. Catrina, yep I made the images through photoshop. mstmarie1, really appreciate the response - I will take this on board and see if it does the trick. The challenge I'm experiencing at the moment is that I'm currently using a separate header-background for the curved section at the top which overlaps on top of the main-background image. Unfortunately, the header-background only runs as wide as the canvas and is not positioning itself at the top (as per the image). Any additional help is greatly appreciated :)

Share this post


Link to post
Share on other sites
ngudan
Just a quick update. I've managed to: 1. curve the edges of the entire canvas 2. add shadow around canvas 3. have the two backgrounds working together The last thing is that after I curved the canvas it left a "white" background behind it - any idea on how to remove this? P.s. here's the code I used to create the rounded corners and shadow effect: #page-canvas {-moz-border-radius: 20px;border-radius: 40px;} #page-canvas {background:none !important;} #page-canvas {-webkit-box-shadow: 0px 0px 15px #000; -moz-box-shadow: 0px 0px 15px #000; box-shadow: 0px 0px 15px #000;}

Share this post


Link to post
Share on other sites
Danny
Hi, To remove the white background, try this please: [code]#page-canvas { background: #FFFFFF !important; } #page { background: transparent !important; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
ngudan
Worked like a charm Danny - big thank you to everyone for helping out! :)

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  

×