Jump to content


Photo
- - - - -

Background image over header under brandnav over body background image

content body background brandnav image

  • Please log in to reply
5 replies to this topic

#1 ardentconcepts

ardentconcepts

    Advanced Member

  • Members

  • 33 posts
  • Country: Country Flag

Posted 14 June 2013 - 08:00 PM

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

Please Login or Register to see this Hidden Content



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 14 June 2013 - 09:53 PM

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.



#3 ardentconcepts

ardentconcepts

    Advanced Member

  • Members

  • 33 posts
  • Country: Country Flag

Posted 19 June 2013 - 04:01 PM

ardentconcepts.com/TRTest/

 

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



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 June 2013 - 11:09 PM

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 -

Please Login or Register to see this Hidden Content

 

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 -

Please Login or Register to see this Hidden Content



#5 ardentconcepts

ardentconcepts

    Advanced Member

  • Members

  • 33 posts
  • Country: Country Flag

Posted 21 June 2013 - 01:11 PM

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?



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 June 2013 - 09:49 PM

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.







Also tagged with one or more of these keywords: content, body, background, brandnav, image