Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   fixed background image moving in smartphones (http://forum.bytesforall.com/showthread.php?t=18669)

Carme Oct 15, 2012 05:01 AM

fixed background image moving in smartphones
 
Hi,
I am working in a website with a fixed background but it seems it doesn't work in smartphones.
I try to find some solutions from different forums but I coudn't.
I would aprecite any help

Here you have my site: http://mercat.karmeba.com/


Thanks in advance,
Carme

juggledad Oct 15, 2012 05:45 AM

probably has to do with the min-height and min-width you have set.

Carme Oct 15, 2012 07:43 AM

Hi,
I have attached some screenshots how the page looks on the smartphone if I remove the min-height and min-width I have set.
As you can see the background either dissapears or it appears too small, I added the min-height and min-width following a tutorial to make my background image re-size according to the screen size it is viewed on.

Any suggestion,

thanks
xxx

juggledad Oct 15, 2012 02:03 PM

Well perhaps since you have an issue, you should ask the author of the article

Carme Oct 15, 2012 02:39 PM

Hi,
thanks for your help.

there is anyone alse that can help me?
I really would appreciate a good suggestion.

thanks
xxx

juggledad Oct 15, 2012 03:45 PM

Since you have
1) followed a suggestion from 'who knows where' (no link provided to it) and
2) this is not part of the theme code and
3) the issue also occurs on the desktop when you make the window smaller

Since you followed someone directions, and haven't provided them - they ARE the best person to ask about this.

And since it seems my suggestions are not helpful, I will have no problem standing back and letting others give you 'good suggestions'

mafgirl Oct 16, 2012 05:28 AM

Hi Juggledad and Carme,

I use the same code for some of my (ATA) website's backgrounds and I got the code from Chris Coyier from CSS Tricks (link to article is http://css-tricks.com/perfect-full-p...kground-image/)
Considering his record for great and innovative CSS I doubt there is anything wrong with the code, unless this problem started occurring after the many new smartphones have come out and he is not aware of it?
Perhaps he might know what the problem is Carme, you could contact him via his website.

FYI Juggledad, the code is:
HTML Code:

<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>

in HTML Inserts: Body Top

and

Code:

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

in CSS Inserts

It works perfectly for me on all computers and Macs I've tried, in normal size and when making the window as small as it can be. I have to admit not having tried it on a smartphone though..


All times are GMT -6. The time now is 06:02 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.