Jump to content
ardentconcepts

Background image over header under brandnav over body background image

Recommended Posts

ardentconcepts

I have a green background image in the body and a white colored header.

 

body{background: url(".../bg-copy1.png") repeat-x scroll 0 0 #82B64A;
  color: #EEEEEE;}

 

#header {background: #ffffff;}
 

I am wanting to put another image over the white header and over the original background image in the body. I have been able to get it in the brandnav section but I can't seem to extend it into the content area, while leaving the header in place.... any thoughts?

 

I'm trying to accomplish something like this, just with a white header...

http://www.emotionslive.co.uk/

Share this post


Link to post
Share on other sites
James B

Hi there, I would imagine from what you've wrote the header is being cut off. I would say try adjusting the padding/margin for the bottom of the header to allow the image to show further down the page. We'd really need to see a live version to advise further. That way we can see exactly whats happening on the page and what adjustments to make to get the effect you want.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
ardentconcepts

ardentconcepts.com/TRTest/

 

-its got a redirect going on make sure est is lowercase if you click to follow

Share this post


Link to post
Share on other sites
James B

Ok looking at the inspirational site compared to your site I would say the best way to create that effect would be to use a hook to insert the image in a new div into the html or header div of the page, then use css to position it on top.

 

If you've not used hooks before check out - http://support.pagelines.me/docs/customization/hooks/

 

The hooker plugin will be the easiest option if you're part of the Plus membership this plugin is free.

 

Another post which shows this affect but on the feature slider can be found here for reference if needed - http://www.pagelines.com/forum/topic/26011-static-image-over-feature-slider/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
ardentconcepts

Ok, so I ended up getting rid of the header color, and making that color part of my repeating background image and then I added a second layer background. This overall works, but I can't seem to get my second background image to resize responsively, any thoughts?

Share this post


Link to post
Share on other sites
James B

Hi there,

 

If you set the width and height of the image using a % width rather than a static px figure it should resize responsively for you.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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


  • Similar Content

    • mtaus
      By mtaus+
      I have added a Lax section on the footer of this site: http://www.ics-law.org.php72-38.lan3-1.websitetestlink.com/ but the background image is not displaying. When I first add the image it appears in the background, but then after saving and reloading it is gone even though the thumbnail indicates it's still there. Screenshot attached.
      Any suggestions?

    • mtaus
      By mtaus+
      I'm trying to add a Careers page to a site to display job openings. The plan is to create a Post using a subcategory 'Careers' and then display those on the page. All of the post sections in PL seem to include images and there's no obvious way to remove them or include an excerpt from the post. 
      Any suggestions?
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • BentleyD
      By BentleyD+
      Hey there,
       
      I am working on BentleyRolling.com. I used grams on MoonbodySoul.com and all the images are cropped to a square, whether they are square or 4:5 when posted on instagram, they still get cropped to a square. This looks way better than some being squares and some being 4:5. Did something change since I designed MoonBodySoul.com with Platform5? Can you help me crop all images to a square on BentleyRolling.com 
       
      All the best,
       
      Bentley
    • cstudio
      By cstudio
      How do I control the lightbox effect on the plugin "popthumbs"?  On mobile, it opens up much to small then when expanded it opens to large.  I would like to control the the lightbox to like 90% of the viewer window but I can't figure out how/where to control that.
      Site example

       
      Thx
×