• 0
Sign in to follow this  
Followers 0

Full Width Header Image

Question

Posted · Report post

I am trying to get my header to stretch across the entire screen like http://www.epicurus.com/food/ . Regardless of how wide my header image is, it shrinks/resizes it to the content area. I've tried following advice of other forum posts, but without luck (adjusted padding, tried all of the layout choices, created wider header images, etc). Any suggestions to get the same effect? www.supportromania.org

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

try adding this code to your PL > custom code > Custom CSS, Save, and then report back what happened. Hope it works. [code] #header .content,#header .content-pad, #header .branding_wrap, #header .mainlogo-link,#header .mainlogo-img {width:100%;} [/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi miracle959, First you would need to use this layout - http://www.screencast.com/t/3R6BLBOf Once you have done, this can you provide a link to your header image please. I will then be able to assist you further! :D As the one currently on your website is MASSIVE! Its 2500x885, this is far to big for your header image and

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Apologies for returning to you so late - I have not been receiving emails when new comments are made. Gyoery - I tried the code snippet. Although it did stretch the header across my screen nicely, it still had white padding on both sides and the navigation bar stretched with it. It also caused the header image to be off-center. Danny - I've set my content to Full Width Sections, but I much prefer the look of Content width page (with drop shadow). This is what I prefer: [url]http://supportromania.org/wp-content/uploads/2012/04/Content-Width-Page-preferred.jpg[/url] This is what happens when I use full width sections: [url]http://supportromania.org/wp-content/uploads/2012/04/Full-Width-Sections.jpg[/url] Here is a link to my header image [url]http://supportromania.org/wp-content/uploads/2012/04/header-with-people.jpg[/url] Thanks for the help - let me know what else I can do from my end (edit the image size, etc.).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, First, you'll need to select the correct layout. Go to Dashboard > PageLines > Settings > Layout Editor. Select the first of the three layouts (Responsive with Pixel Width) - Save. You don't need any of the CSS provided by others above. Go to Dashboard > PageLines > Settings > Color Control and choose "Full Width Sections". Then, scroll down and where your image is uploaded, set the background to Not Repeat. Vertical position should be "0" and Horizontal should be "50" - Save. In Custom Code > CSS Rules, replace [b]body {}[/b] with [code]body { padding-top:0px; }[/code] Let us know how this turns out.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Rangelone - I think your solution is for the background image? I'm trying to get my header image to stretch all the way across the screen like this example http://www.epicurus.com/food/ (or at the least, beyond the content/page area so that the white borders on either side are gone). I need my layout to be static, as I found problems with the feature slider images being cropped and cut off on larger monitors if I use a responsive layout (maybe there is a fix for this besides using the static layout?). Either way, the method you proposed didn't change anything, so I reset it back to how I had it for now.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, The only way you can get your Header image stretched all the way across the screen is to set the Full Width Sections layout option like I mentioned above. If you do not want to use this option, you will then be forced to use your header image, as a background image. These are your only two options, as far as I know. So doing option one with the Full Width Sections, please add the CSS below to either your child themes style.css, if you're using the PageLines Customisation plug-in add the code to the plug-ins style.css. [code]#branding .texture {background: url(http://supportromania.org/wp-content/uploads/2012/04/header-with-people.jpg) 50% 0; height: 400px; } #branding .content {background:transparent;}[/code] However, like I mentioned in my previous reply, your header image is far to big, you have now actually made this even larger 3000x400 pixels? The dimensions need to lowered, you can do this in programs like GIMP or Photoshop. I recommend a maximum size of 1920x256 pixels. Please do the following, see how this looks and if you like it, we can then try and add some content shadow to your content area.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny. This will work. I've played around with the sizes and gotten it to a point I'm happy with, but I've got a big "Support Romania" text floating on top of the header image (presumably this is the link that was attached to the header image). I'll see what I can find on that topic. I would like to add a drop shadow to the content area (and bottom of header image if it isn't difficult). Thanks again!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, The Text/link Suport Romania is there because you have no logo uploaded, to resolve this. I recommend you remove the "Support Romania" text from your header image and create a logo using this text on a transparent background. The upload the new logo image using the upload option in Website Setup and upload and replace your header image without the Support Romania red text on. Once you have completed, this inform us and we can assist you with positioning the image in the center. Adding a shadow to the content area is going to be extremely tricky because you wanted a full width header image, you had to change settings to Full Width Sections. In doing so this also effects the content area. Therefore, you will need to add custom CSS for the box shadow to every section you use, this is going to be very tricky, I have started you off below. However, you will need to use either Firebug or Google Chrome's web dev tool, to insect the elements and work out where you need to add the box shadow. [code]#page-main .content { -moz-box-shadow: 0 1px 5px rgba(0,0,0, .8); -webkit-box-shadow: 0 1px 5px rgba(0,0,0, .8); box-shadow: 0 1px 5px rgba(0,0,0, .8); }[/code] The above CSS will add the box shadow to the main content area, however this will not add any shadow to the navigation or footer. A good resource for Box shadow can be found here - http://www.css3.info/preview/box-shadow/

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  
Followers 0