Jump to content


Photo
- - - - -

Expanding size of Header Image


  • Please log in to reply
5 replies to this topic

#1 cvandyck

cvandyck

    Advocate

  • Members
  • PipPipPipPipPip
  • 268 posts

Posted 10 September 2011 - 07:03 PM

Am trying to expand size of header image as well as move .. ... applied the following code .. wanted the image to expand to width of page ... also tried 125% instead of "contain" .... doesn't seem to work .. suggestions? /* This is to give a background image*/ #page-canvas {background-image: url("http://ccvandyck@savefairfaxcountyschools.com/savefcps/wp-content/themes/platform/images/SchoolImage.JPG"); background-size: contain; background-position: top left, -50,0;} #page-canvas {background-repeat:no-repeat;}

#2 Rob

Rob

    One Smart Egg

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

Posted 10 September 2011 - 07:40 PM

First, your code above includes an email address, not a URL. Are you trying to make this header wider than the maximum content of the site?

#3 Rob

Rob

    One Smart Egg

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

Posted 10 September 2011 - 07:47 PM

None of that code will work. I'd strongly suggest you delete it. What is your goal here?

#4 cvandyck

cvandyck

    Advocate

  • Members
  • PipPipPipPipPip
  • 268 posts

Posted 10 September 2011 - 09:00 PM

goal is to take an image and use it for the header .. ie .. image banner .. .. just can't figure out how to do it just curious but why won't that code work?

#5 jennajonesdesign

jennajonesdesign

    Super Member

  • Members

  • 113 posts
  • LocationBillings, MT
  • Country: Country Flag

Posted 10 September 2011 - 09:27 PM

I have done this by just uploading my image banner as the logo. It will allow it to take up the full width. For this option you will just have to include your logo in your image banner. Another option...Use the full width deign framework and design your background to include the background, header and page. It will just be one flattened image instead of different parts layered on top of each other. With this option your logo can stay separate. I don't know a lot of code so this is may way of problem solving around coding. ;) Jenna

#6 Rob

Rob

    One Smart Egg

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

Posted 10 September 2011 - 09:28 PM

First, the image itself is almost the whole page... rather than merely the header itself. Second, because your URL for the image was an email address ccvandyck@.... Thought it may have appeared, the link wasn't correct. Please take a quick look at my site...

Please Login or Register to see this Hidden Content

where you'll see a full width header background. You need an image more than 2000 pixels wide but not more than 3600px.. and not too tall. Make sure in the Design Control, where you've uploaded your image, you have the vertical position set to 0 (top) and the horizontal set to 50 (center). Also, make sure you set the repeat correctly. For one single image, just set it to Do Not Repeat.