Achtergrond werkt niet op mobiel

[lerrie]

Mijn website (http://tinyurl.com/ax68brt) wordt op de mobiele telefoon niet goed weergeven. Op de pc werkt deze wel gewoon. Het probleem zit hem denk ik in de fixed background positie, maar het lukt mij niet om het probleem te verhelpen. Dit is de opbouw van de site (zonder inhoud):

<div id="outheader"></div>
<div id="outintro"></div>
<div id="outbeurzen"></div>
<div id="outfoto"></div>
<div id="outtwitter"></div>
<div id="outfooter"></div>

Css is:

#outheader {
	background-image: url(images/achtergrond/header.jpg);
	float: left;
	height: 660px;
	width: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 50% 0px;
	margin: 0px;
	padding: 0px;
		}
#outintro {
	background-image: url(images/achtergrond/body.jpg);
	float: left;
	height: auto;
	width: 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-position: 50%;
	padding-top: 60px;
	padding-bottom: 60px;
		}
#outbeurzen {
	background-image: url(images/achtergrond/beurzen.jpg);
	float: left;
	height: 315px;
	width: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 50% -300px;
		}
#outfoto {
	background-image: url(images/achtergrond/body.jpg);
	float: left;
	height: auto;
	width: 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-position: 50%;
	margin-bottom: 70px;
	margin-top: 70px;
		}
#outtwitter {
	background-image: url(images/achtergrond/twitter.jpg);
	float: left;
	height: 315px;
	width: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: 50%;
	font-family: 'Roboto Condensed', sans-serif;
}
#outfooter {
	background-image: url(images/achtergrond/body.jpg);
	float: left;
	height: 240px;
	width: 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-position: 50%;
}

Het gaat vooral mis bij de outdivs die op de pc een fixed scroll effect hebben ("outheader" + "outbeurzen" + "outtwitter")

Wat gaat hier mis en hoe is dit op te lossen?

 

[csshunter]

Hoi lerrie,
Wat er mis gaat, is dat de breedtes van die containers op 100% zijn gezet. Dat gaat goed als het scherm zo breed is dat de hele content er op past. Dat gaat fout als dat niet zo is: dan wordt wat er rechts aan fixed background-img in zit, er keurig afgeschaafd. Dus scroll je voorbij de 100% breedte: niks meer aan bg-img te zien.
Maar het L/R scrollen is wel nodig om de content te kunnen zien!

Ik zou eens proberen:

#outheader {
    ...
    width: 100%;
    min-width: 1050px; /* = de 1040px breedte van de #footer (het breedste element v/d pagina) + 5px links en 5px rechts om niet helemaal knel in het browser-venster te staan */
    }

en voor die andere containers idem.

Met vriendelijke groet,
CSShunter