Jump to content


Photo
- - - - -

full width header issue


Best Answer Rob , 06 February 2013 - 02:53 AM

Hi,

 

I'm unclear why you're doing this with CSS.  I do it with settings on my site, using very wide, specific height background images, not relying upon scaling.

 

Keep in mind that some browsers like IE9 and Safari may not cope with scaling images the same way that Firefox or Chrome might.

 

You can actually create a specific graphic as the background, make it at least 2000px wide and 176px high (or whatever height you desire).

 

Then, go to Dashboard > PageLines > Site Options > Color Control and upload your image. Set the vertical option to 0 and the horizontal to 50. If using 1px wide  Make sure your branding is a transparent background image that is just a little shorter than the height desired for the background (factoring in the padding and margins).... 30px shorter should be fine.

 

Save the setting.

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 zabby

zabby

    Member

  • Members
  • 13 posts
  • Framework Version:platform pro
  • Country: Country Flag

Posted 05 February 2013 - 09:51 PM

Hello! I've read through the threads on creating full width headers–thank you–but now I'm having an issue with this code:

 

CSS/LESS Rules

#header.container-group {background-image: url("

Please Login or Register to see this Hidden Content

"); height: 180px;}

 

This is my site:

Please Login or Register to see this Hidden Content

 

This is the error message I'm getting: parse error: failed at `background-image: url("

Please Login or Register to see this Hidden Content

"}` line: 982

 

It's text spacing is all squirrely on safari. Any help would be much appreciated! Thanks in advance.



#2 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 05 February 2013 - 10:30 PM

try single quotes, or no quotes at all.



#3 zabby

zabby

    Member

  • Members
  • 13 posts
  • Framework Version:platform pro
  • Country: Country Flag

Posted 05 February 2013 - 10:37 PM

dang. tried both single and no quotes and it's still wonky.



#4 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 05 February 2013 - 10:52 PM

Well i just added that one line and it parses fine, is that all the css you have? Whats the actual error can you screenshot it?



#5 zabby

zabby

    Member

  • Members
  • 13 posts
  • Framework Version:platform pro
  • Country: Country Flag

Posted 05 February 2013 - 11:19 PM

Yes, this is the only code I have:

#header.container-group {background-image: url('

Please Login or Register to see this Hidden Content

'); height: 176px;}

 

I'm not getting errors any more but it's still weird in safari [emptied my caches]. I wonder, the text below the top image is a banner. Could something about that be screwing it up? Thanks!



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 February 2013 - 02:53 AM   Best Answer

Hi,

 

I'm unclear why you're doing this with CSS.  I do it with settings on my site, using very wide, specific height background images, not relying upon scaling.

 

Keep in mind that some browsers like IE9 and Safari may not cope with scaling images the same way that Firefox or Chrome might.

 

You can actually create a specific graphic as the background, make it at least 2000px wide and 176px high (or whatever height you desire).

 

Then, go to Dashboard > PageLines > Site Options > Color Control and upload your image. Set the vertical option to 0 and the horizontal to 50. If using 1px wide  Make sure your branding is a transparent background image that is just a little shorter than the height desired for the background (factoring in the padding and margins).... 30px shorter should be fine.

 

Save the setting.



#7 zabby

zabby

    Member

  • Members
  • 13 posts
  • Framework Version:platform pro
  • Country: Country Flag

Posted 19 February 2013 - 07:11 PM

Rob,

 

Good question. I don't know why I'm doing it in CSS, would rather not :) I'll try it the way you suggested. Thank you! 



#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 19 February 2013 - 08:11 PM

Did the suggestion above work for you?



#9 zabby

zabby

    Member

  • Members
  • 13 posts
  • Framework Version:platform pro
  • Country: Country Flag

Posted 20 February 2013 - 02:47 AM

Yes! Thank you.