Image plein écran responsive centrée

Bonjour,

je travaille sur un site qui a une photo plein écran en splash page. Je voudrais que la photo remplisse toujours l'écran, que ce soit verticalement ou horizontalement (et donc qu'elle déborde de l'écran pour garder ses proportions).

Deuxième défi : je ne veux pas qu'elle soit fixe en haut à gauche de l'écran et qu'elle ne déborde qu'à droite ou en bas. Je veux qu'elle soit centrée, c'est à dire que si je réduis la largeure de l'écran, je voudrais qu'elle déborde sur les deux coté de façon à garder son centre au milieu de l'écran.
Je connais un site qui fonctionne comme ça mais je ne sais pas si je peux afficher publiquement le lien, je peux donc l'envoyer par messagerie privée.

Merci d'avance pour votre aide !

Salut
un peu comme ça ?

https://www.w3schools.com/howto/tryhow_css_fullpage_demo.htm

pourrais-on avoir ton image pour tester ? ou une url ?

c'est tout à fait ça !

JENCAL a écrit :

pourrais-on avoir ton image pour tester ? ou une url ?

Le problème c'est que je travaille sur wordpress en local et que l'image en question est en fait un slide qui fonctionne grace au plugin smart slider

Ce sont des images bidons en plus, enfin je veux dire c'est surement pas celles ci que je vais utiliser, pour l'instant je met en place la structure. C'est des photos format paysage, pas portrait
Modifié par Isaabelle (05 Feb 2020 - 11:10)

bon bah du coup tu as le code sur l'exemple :

background-image: url(img_parallax.jpg);
height: 100%;
    background-position: center;
    background-size: cover;

sur ta div.
Modifié par JENCAL (05 Feb 2020 - 11:53)

Oui mais du coup l'image est utilisée comme background image.
On peut mettre un slide en background image?
Je vais quand même essayer voir si ça marche...

Bonjour,

alors le code responsable de cet effet est plutôt:

  background-size: cover;
  background-position: 50% 50%;

mais ça ne concerne que les images en effet, pour mettre un autre élément il faudra passer par d'autres moyens, le js notamment.

plus d'infos ici: https://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

Merci, du coup je vais abandonner l'utilisation du plugin, commencer par une image en background et voir si après j'arrive à animer un slide en CSS.
Merci déjà pour vos infos !

tu peut aussi mettre ton img en background du body
ou une classe img

html, body {
    margin: 0; padding: 0;
    font-size: 100%;
    scroll-behavior: smooth;
    background-color: #212121; 
    min-height: 100vh; width: 100vw;
    overflow-x: hidden;
    background-image: url(‘image.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    }

________________________________________
.img {
        position : relative; z-index: 1;
	width : 100%; height : 100%;
	object-fit : cover;
	object-position: center center;
        }