Jump to content
Sign in to follow this  
philippez

How to show more of my background image on top of the page?

Recommended Posts

philippez

I would like to have a nice background on top of my full width canvas framework. I would like to have that background image on all my pages across the site. The only thing is that when I start adding section in drag and drop, everything goes all the way to the top hiding my nice top background. How can I show more of my top background. I would want to lower down the page area but I don't know how to do that. Did I say that I wish to see some of the background at the top of my pages. Right now, the content area (branding, ect) starts at top of page obscuring the background. I would want to lower that. How do you effectively slide the content down? How tell the "page-canvas" (or what ever it is) to start 20 or 40 px lower so some background image shows over the top? Thanks

Share this post


Link to post
Share on other sites
Rob
May we have a link to your site to see precisely what the issue is?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
philippez
sure. the site is Joliane.com ... the color band on top is the background image that i would like to put in. Now it looks like I would want it to be but I had to play with the image in my feature slider in order to make it look like it's one image across but in reality the center image as the same color band as well just to it could look like it's going from left to right in the back ground. I hope it's clear... the way it is now is the way i would like to have it but i don't want to play with the image to get the effect that I want for the background image. thanks for caring. ps. take a look at the feature page and you'll see what i mean. philippe

Share this post


Link to post
Share on other sites
Danny
Hi Philippe, Do you mean so it looks like this ? http://i.imgur.com/fTbUf.jpg

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
philippez
No, what I want is more space at the top of the page so I can see more of of the background at the top. for now I only see maybe 20 pixels at the top of the page but I would like to see something more like 100 pixels of the background image on top of the page... to make it look like this http://screencast.com/t/HrWmsoax I also want to see more white under the color background just so my feature slider is not to close from it.

Share this post


Link to post
Share on other sites
catrina
Can you please post a link to your site? That way, we can figure out the best way to accomplish what you're looking for.

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
philippez
I did put the name of my site 2 posts above but here it is again. http://www.Joliane.com thanks

Share this post


Link to post
Share on other sites
philippez
no the colored bar, my background image. All the black around the image is not part of my site.

Share this post


Link to post
Share on other sites
gormanit
Your background image has a height of 83px all of which is being displayed. If you want to see more of your colored background, then you should make that image taller. You could also play around with repeating the background image, but the image has white under the color (about 20px). You would need to alter the image to have no white.

Share this post


Link to post
Share on other sites
Rob
Gormanit is correct, the image is simply the size you have set it to be. You can copy the image and in an image editor make an image to the height you want. If you are trying to make the distance between the logo and the background a little closer, your header image has included the background color statically. You could adjust that in an image editor as well.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
philippez
Thank you all for taking the time to answer my question but it seems like I am not making my self clear. I'm going to remove the fix that I did in order for you to see what the problem is. http://www.joliane.com

Share this post


Link to post
Share on other sites
philippez
Ok now i removed the temporary fix; take a look at my site and you'll hopefully see what the problem is. thanks

Share this post


Link to post
Share on other sites
Jenny
I still don't understand what the issue is. If you want your striped background image to be taller, then you need to make it a larger image. Normally it could be tiled but it looks like the image has some white space at the bottom as part of the actual image. If you right click on the background image and click "view background image", you will see that the images are the same height which is why we are all confused. :)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
philippez
hey simplemama. I think that I can explain best using your site simplemama.com how can I see more of the background red on top of the white page? How can you bring the white page down to see more of the background color at the top. You see how you have only maybe 10 pixels on top fo your page... what would you do in order to have appproximately 100 pixels of red showing at top of your page thus showing more of your red background. If this is still not clear I'll have to give up. :-)

Share this post


Link to post
Share on other sites
Jenny
Hmm.. ok well my page is laid out a little different but I can tell you how to get more color up there, but not more of your image (I don't think anyway). Right now the color at the top of your page is black, I assume you don't want that so I will use white in the code below. (I'll also try putting the image in there.)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
Jenny
Seems like what you suggested helps a lot. :) I'm not sure exactly what you want, but hopefully it's something close to this. And by the way, this is as tall as it can go because of the height of your background image. If you want it any taller, you will have to adjust your image in a photo editing program. Hope this is good! [code]body { background: url("http://www.joliane.com/wp-content/uploads/2011/11/Colormarginup-down2.12.jpg") repeat scroll 0 0 #FFFFFF; padding-top: 54px; }[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
philippez
Giving up. Thanks to Rangelone, Danny, Catrina, Germanit and Simple_mama for trying to help. I really appreciate your time. Philippe

Share this post


Link to post
Share on other sites
catrina
Are none of the solutions we provided working or are they working, but not working exactly as intended?

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
Danny
Hi Phillppe, Can you add this to your custom code and let me know if this is what you were after. [code] body { background-image: url("http://www.joliane.com/wp-content/uploads/2011/11/Colormarginup-down2.12.jpg") !important; padding-top: 40px !important; } .canvas #page, .full_width #page, body.fixed_width { background-image: none !important; } [/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Jenny
The code I provided above showed approximately 100px of the striped background image at the top so I'm not sure what was wrong with it. Hopefully you can let us know, other than just saying you're giving up. :)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
philippez
YES, YES that's it, Thank you Danny. Your code worked for what I was trying to do. Philippe

Share this post


Link to post
Share on other sites
Danny
Cool, glad that worked for you!

Please search our forums, before posting!

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  

×