Archived

This topic is now archived and is closed to further replies.

  • 0

Footer Transparent Background


Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

changed to fixed-width mode, and it looks fine.

anyway to do it with full-width sections?

Share this post


Link to post
Share on other sites

Posted · Report post

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: http://rvconvoys.com/

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

many thanks

Amir.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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 www.epicurusinstitute.org as an example.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites