Arrière-plan : image plein écran sans défilement

[guigs35]

bonjour,

je souhaite obtenir une image plein écran ( aucune colonne à gauche et a droite).
J'ai trouvé un tutoriel appelé "défilement image" créer un effet de défilement grâce à un fond fixe par rapport à la fenêtre navigateur  mais sur celui ci, l'image est en défilement et je voudrai qu'elle soit statique.

merci

Edité par admin :

"Je souhaiterai ne plus avoir de colonne de part et d'autre mon contenue.
Je voudrai que lorsque je mets une illustration, celle la prend tout la page comme sur le site apple https://www.apple.com/fr/osx/elcapitan-preview/"

Adresse du site : site de eyesport

[FredVig]

Nous allons rassembler vos deux questions en un seul post :
Votre autre question : site en pleine page

D'abord une précaution : lorsque nous disons "image sans défilement", c'est par rapport à la fenêtre du navigateur.
Dans le cas de la page d'Apple avec le fond de montagne, nous avons un fond avec défilement :
preview Apple elcapitan
C'est une confusion classique. Nous parlerons d'image Statique lorsque celle-ci de bouge pas par rapport à la fenêtre du navigateur, comme dans le tuto Jimdo dont le titre crée la confusion image en arrière-plan fixe

[FredVig]

Dans le tuto Jimdo (effet de défilement grâce à un fond fixe), si le fond de page occupe toute la place disponible, les "colonnes" de part et d'autre que vous voulez supprimer subsistent. Elles sont seulement moins évidentes, car situés sur un même fond blanc.

Sur votre site eyesport, vous avez déjà modifié le code de façon a élargir le contenu à la taille de la fenêtre :

Code:

.layout-alignment {
width: 100%!important;
}

Cette partie de votre demande (élargir à toute la page en supprimant les colonnes de part et d'autre) devrait être donc résolue, si j'ai bien compris ce que vous cherchez à obtenir.

[FredVig]

L'autre partie concerne la position de l'image de fond.
Actuellement, elle est fixe (par rapport au navigateur). La page défile devant elle. Mais elle occupe toute la place disponible.
Comme il n'est pas possible (à partir de l'interface Jimdo) d'imposer une image non fixe pour un fond de site pleine page, il faudra forcer ce comportement avec du code.
D'abord, cibler l'image de fond. Il s'agit du background situé dans le contenant marqué par la classe .body
La propriété à modifier est le background-attachment, qu'il faut mettre en scroll.
Essayez le code

Code:

.body{background-attachment:scroll!important;}

[guigs35]

Bonjour,

Tout d'abord merci pour votre aide.
J'ai essayé votre technique afin d'avoir une image sur toute la largeur de mon site.
J'ai inséré le code et j'ai bien l'image sur toute la largeur du site mais seulement la partie haute de l'image http://www.eyesports.fr/

<div style="display: block!important;margin-left: -1000px;margin-right: -1000px;">
<div style=
"background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=696x10000:format=png/path/s6a6446cbb65a7616/image/ia46c67dda0528c14/version/1450704718/neurotracker-eyesports.png); background-size: cover; background-attachment: scroll!important;}background-position: center; width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
</div>

Pouvez m'aider à modifier ce problème ?

Cordialement

[Contenu sponsorisé]