Jump to content


Photo
- - - - -

Footer Transparent Background

footer background

  • Please log in to reply
8 replies to this topic

#1 amirrainer

amirrainer

    Member

  • Members
  • 25 posts
  • Framework Version:2.3

Posted 26 November 2012 - 11:42 AM

Hi,

I really tried finding the answer in the forums, but couldn't, so posting my issue in a new topic.

I'm using an image as a background (set globally to the entire website).
when not "supersizing" the background image, the footer is not transparent, so a white background is shown and not the image background.

I would really appreciate your help.

Amir.

#2 amirrainer

amirrainer

    Member

  • Members
  • 25 posts
  • Framework Version:2.3

Posted 26 November 2012 - 12:17 PM

changed to fixed-width mode, and it looks fine.
anyway to do it with full-width sections?

#3 catrina

catrina

    Advocate

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

Posted 26 November 2012 - 03:21 PM

You can try using CSS to make the footer transparent:

Please Login or Register to see this Hidden Content



#4 amirrainer

amirrainer

    Member

  • Members
  • 25 posts
  • Framework Version:2.3

Posted 26 November 2012 - 04:58 PM

thanks.
After supersizing the BG, when the browser's window is not on the same size as the BG image (1280*728) or I view it on the iphone, the BG is not centered and goes left.
you can see it here:

Please Login or Register to see this Hidden Content


b.t.w, so I was wondering, what is the best size for the BG image in supersized mode?

many thanks

Amir.

#5 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 27 November 2012 - 04:45 AM

We've had some instances where the image size was too large and if it was over a set DPI the background didn't react properly on mobile devices. Try resizing the background so its slightly smaller. The supersize background only scales using the height, so you might have to edit the bg image slightly so it scales correctly into the layout, bring the width in a bit.

#6 amirrainer

amirrainer

    Member

  • Members
  • 25 posts
  • Framework Version:2.3

Posted 27 November 2012 - 12:49 PM

Hi James, thanks for the reply.
tried scaling the width a bit, same result. you can see the effect when you scaling the width of the browser... you see white background replacing the BG on the left.

#7 catrina

catrina

    Advocate

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

Posted 27 November 2012 - 03:21 PM

I see this happening on the left side with the white overlay, but I also see this happening on the right side (on Firefox for Mac). Is this what you mean? The white overlay background color behaves that way because of padding.

#8 amirrainer

amirrainer

    Member

  • Members
  • 25 posts
  • Framework Version:2.3

Posted 27 November 2012 - 10:47 PM

Ok. I think I understand the problem now.
while the native proportions of the BG remains the same, no matter what size it is, it scales perfectly.
the problem begins when the proportions change and the browser width narrows down. no problem with any changes in height, though.
this is why we see the problem when we view it on the iPhone only in vertical mode.
any way to fix that?

many thanks for your great support.

Amir.

#9 Rob

Rob

    One Smart Egg

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

Posted 29 November 2012 - 03:10 AM

Image scaling is proportional.  So a 1000px by 500px background image will easily become 2000px by 1000px.   But an image of 1000px by 500px will not scale to 1200px by 900px.  So, in many browsers and monitors, background images are often found to be short.  Supersize stretches the image, but can make it look odd,  or you can use tiling.  People who view sites on very large monitors often have high resolution, but very wide screens, so the images have to coordinate with that.

 

One magic trick is to apply a background that has a solid color at the bottom of the image, then have the footer use the same color (by hex code) as its background color.  Then the image blends right into the footer seamlessly.  See the background at

Please Login or Register to see this Hidden Content

as an example.