Portfolio Web Designer + prob d'img sur mobile

Bonjour je vous je vous link mon portfolio : mickael-attuil.fr

J'ai un petit prob dessus, lorsque x < 960 la vidéo laisse place a une img de Paris ( exactement la seine) que j'ai fixé en background-attachment:fixed; ce qui donne un effet plutot sympa (imo);

Mais lorsque je teste mon site avec un mobile celle ci ce comporte comme une image standard.

Si vous voyez pas ce que je veux dire juste essayez mon site sur desk avec x>960 et sur mobile vous comprendrez de quoi je parle.

Au passage n'hésitez pas dire votre avis, et si vous voyez une faute ou quelque chose qui vous choque, dites le moi

La fatigue fait que par moment on peut oublier certaines choses

Bonjour,

Je ne vois pas trop où est ton problème, j'ai testé sur desktop et sur mobile et le résultat semble être celui attendu par ton code (ou plutôt le code généré par ton appli ?) :

<video id="video" autoplay loop preload="auto">
    <source src="media/paris-berge%20(1).webm" type="video/webm">
    <source src="media/paris-berge%20(1).ogv" type="video/ogg">
    <source src="media/paris-berge.mp4" type="video/mp4">
</video>
<!--Img de remplacement pour Low rez-->
<div id="paris-berge">
</div>

Donc on a une image sur mobile et une vidéo sur desktop. Je suppose que c'est par media-queries qu'on fait disparaitre l'un ou l'autre, selon la taille de l'écran, par un display: none;

Sinon juste un conseil : élimine les nombreuses fautes d'orthographe et fait disparaître ton formulaire de contact tant qu'il n'est pas opérationnel, parce que afficher le formulaire (qui ne marche pas) avec un "ne sachant pas encore très bien gérer le langage PHP" est du plus mauvais effet.

"Donc on a une image sur mobile et une vidéo sur desktop. Je suppose que c'est par media-queries qu'on fait disparaitre l'un ou l'autre, selon la taille de l'écran, par un display: none; "

#paris-berge{display:none;background-image:url(../images/paris-berge.jpg);background-position:top;background-attachment:fixed;background-repeat:no-repeat;color:#dedede;width:100%;height:400px;}
#video{width:100%;position: relative;}


@media only screen and (max-width:960px ) {
  
    #paris-berge{display:block;background-image:url(../images/paris-berge.jpg);background-position:top;background-attachment:fixed;background-repeat:no-repeat;color:#dedede;}
    #video{display:none;}
    .intro{color:#2d2d2d;text-shadow:none;background-color: rgba(222,222,222,1);padding:10px;width:80%;bottom:50px;text-align: center;border-radius:5px;}
    header{background:rgba(222,222,222,1)}
}

oui comme voici, je fais disparaitre ma vidéo et fais apparaitre mon image avec un display : block;

Ben en faites mon background attachment : fixed n'a pas l'air de marcher lorsque je visualise mon site sur un mobile.
Quand je test mon site sur mon iphone la balise se comporte comme une image standard.

J'ai pris en compte, les fautes d'ortho et j'ai viré le commentaire en attendant de mieux maitriser le Php ;

Bon c'est pas grave si vous me comprenez pas on est dimanche de tte manière; ca urge pas;
Je relancerais au pire un topic sur mon prob middle semaine, et surement d'ici la cela sera réglé !

Bonne fin de dimanche !
Modifié par mika931 (06 Mar 2016 - 19:09)

Hello,

Sur mobile, le background-attachment était (et est) encore assez mal supporté...
Tu tests sur quel navigateur/OS ?

je suis sur chrome.
Bon ben je vais laisser tel quel ou je vais voir si il y a un plug in jquery pour compenser.
Merci !

Bon ben je suis deg ca marche toujours pas, malgré http://nnattawat.github.io/fixedBG/ ce plug in jquery
je pensais que ca marcherait.


Mais du coup je me basais sur ce site ou le background img marche bien sur mobile ;
http://www.thesunkenchip.com/
mais j'y comprends rien comment ils ont généré leur site ;
Nb : au passage si vous êtes sur Paris ou de passage et que vous aimez le poisson frit c'est très bon
Modifié par mika931 (07 Mar 2016 - 16:55)