Jump to content
Sign in to follow this  
amirrainer

Footer Transparent Background

Recommended Posts

amirrainer    0
amirrainer

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

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

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
amirrainer    0
amirrainer

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
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
amirrainer    0
amirrainer

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

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  

×