Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

fixed background image moving in smartphones


  #1  
Old Oct 15, 2012, 05:01 AM
Carme
 
60 posts · May 2012
Brighton
Send a message via Skype™ to Carme
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
  #2  
Old Oct 15, 2012, 05:45 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
probably has to do with the min-height and min-width you have set.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Oct 15, 2012 at 02:52 PM.
  #3  
Old Oct 15, 2012, 07:43 AM
Carme
 
60 posts · May 2012
Brighton
Send a message via Skype™ to Carme
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

Last edited by Carme; Nov 27, 2012 at 05:54 AM.
  #4  
Old Oct 15, 2012, 02:03 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Well perhaps since you have an issue, you should ask the author of the article
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Oct 15, 2012 at 02:53 PM.
  #5  
Old Oct 15, 2012, 02:39 PM
Carme
 
60 posts · May 2012
Brighton
Send a message via Skype™ to Carme
Hi,
thanks for your help.

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

thanks
xxx
  #6  
Old Oct 15, 2012, 03:45 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Oct 16, 2012, 05:28 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
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..
__________________
my website www.marolinedesign.com

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
I want a full width header, fixed width content and a background image tsheridan Header configuration & styling 5 Jan 29, 2013 02:46 PM
[SOLVED] Positioning center column with a fixed left margin on background image annsworld Center area post/pages 18 Jun 23, 2011 04:30 AM
[SOLVED] Full width header with fixed width image and background color WilliamNavidson Header configuration & styling 4 Jun 10, 2011 02:13 AM
Can I add a clickable phone number to the header or bar below for smartphones to use? angiebare Header configuration & styling 6 Apr 12, 2011 06:25 AM
fixed background image tarak Header configuration & styling 1 Mar 26, 2009 05:26 PM


All times are GMT -6. The time now is 08:26 PM.


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