forcer une image en mode cover à se mettre à droite

Le problème exposé dans ce sujet a été résolu.

Bonjour,

je ne pense pas qu’il soit nécessaire de mettre mon code pour solutionner mon souci :B

Est-il possible de forcer une image (en background cover) à se mettre à droite (pour le mode mobile)

#bgfade1
{background-image: url('../imgs/1920w/Lou_GP.jpg');}

J’ai essayé le text-align, le float, le right: 0 etc rien :B

Merci pour votre aide et bonne journée,

PLS

+0 -0

Bonsoir Situphen,

le code est issu d’un slider. les CSS :

#bgfade1
	{
		background-image: url('../imgs/640w/Lou_GP.jpg');

	}
#bgfadewrap
{
	position: relative;
	overflow: hidden;
	height: 100vh;
}

#bgfadewrap > div
{
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width:100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

et le HTML :

`<header id="header">

	<div id="bgfadewrap">
		<div id="bgfade1">
			<div>
				<h1>Titre 1</h1>
			</div>
		</div>
		<div id="bgfade2">
			<div>
				<h1>Titre 2/h1></div>
			</div>
			<div id="bgfade3">
				<div>
					<h1>Titre 3</h1>
				</div>
			</div>
		</div>

A chaque image correspond un titre. Les images sont par défaut en mode center, mais le le sujet de l’une d’elle se trouve à l’extrême droite. Un float right m’est donc indispensable :B

Merci pour ton aide ;)

+0 -0

Salut, j’ai assemblé ton code comme ci-dessous puis je l’ai testé et il doit manquer des bouts pour que cela fonctionne comme tu le souhaites car les div qui contiennent les titres et les images se superposent les unes sur les autres (à cause du position: absolute) et l’image est étirée sur tout l’écran (à cause des top: 0 et compagnie).

Que souhaites-tu obtenir ?

<html>
<head>
    <style>
        #bgfade1
        {
            background-image: url('https://zestedesavoir.com/static/images/logo-background.png');
        }
        #bgfadewrap
        {
            position: relative;
            overflow: hidden;
            height: 100vh;
        }

        #bgfadewrap > div
        {
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width:100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div id="bgfadewrap">
        <div id="bgfade1">
            <div>
                <h1>Titre 1</h1>
            </div>
        </div>
        <div id="bgfade2">
            <div>
                <h1>Titre 2</h1>
            </div>
        </div>
        <div id="bgfade3">
            <div>
                <h1>Titre 3</h1>
            </div>
        </div>
    </div>
</body>
</html>
+0 -0

Bonjour Situphen,

Oui, c’est bien ça. Le slider contient des images "fullscreen", un diaporama en mode "cover" pour résumer, d’où les top etc :0.

Les images sont par défaut centrées sur mobile. Cela me pose un problème pour l’une d’elle pour laquelle je souhaiterais que l’image se cale sur la droite à cause du visuel.

Merci beaucoup et bon week-end ;)

+0 -0

Bonjour :)

Mea Culpa, background-position fonctionne bien, mais sur la div :

#bgfadewrap > div
{
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width:100%;
	height: 100%;
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

Mais cela s’applique à toutes les images alors que j’aimerais que ce soit le cas (background-position: center right) sur une seule image. J’ai cherché un moyen de le faire en faisant appel aux class, mais ce n’était pas une bonne idée.

où ai-je fauté ? :B

Merci encore et bon dimanche.

+0 -0

Il faut l’appliquer sur le seul élément qui a l’image de fond à déplacer.

Mais il faut faire attention à la spécificité des sélecteurs, car #bgfadewrap > div (avec deux niveaux, dont un id et un élément) a plus de poids que #bgfade1 tout seul (un id seul).

Tu peux le vérifier avec les outils de développement, une propriété surchargée apparaît généralement grisée ou barrée.

Plus d’infos : https://developer.mozilla.org/fr/docs/Web/CSS/Specificity

+2 -0

Merci viki53 :)

Pour le coup, j’ai retiré le "background-position" de "#bgfadewrap > div" pour le rajouter sur chaque images. Sur une seule image, cela ne fonctionnait pas.

Les CSS :

	#bgfade1
	{
		background-image: url('../imgs/640w/Lou_GP.jpg');background-position: center right;

	}

	#bgfade2
	{
		background-image: url('../imgs/640w/Lou_GP_3.jpg');background-position: center center;
	}

	#bgfade3
	{
		background-image: url('../imgs/640w/Lou_GB_4.jpg');background-position: center center;
	}

Merci à vous et au zeste :)

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte