18008 sujets

Questions générales et questions de débutants

"couper" un background-image ?

Bonjour à tous,

Je tente de savoir si il est possible de couper un background à partir d'une certains hauteur.

Je m'explique :

J'ai codé quelques lignes de css afin de rendre mon background-image a peu près responsive. L'objectif est que l'image reste centré lorsque la dimension de l'écran change. ==> je vous mettrai mon code HTML/CSS entier ci-après.

Pour coder ceci, j'ai du intégrer mon image de fond en background, et non simplement pas simplement poster l'image avec une width 100%.

Etant donné que mon image est en background, elle reste en fond lorsque je scroll en vers le bas du site, ce qui me dérange. Ma question est la suivante :

- Est-il possible "d'arreter" le background apres une certaine limite ? par exemple, mettre mon background sur l'image d'accueil, mais lorsqu'on scroll vers le bas, faire en sorte qu'il n'y ai plus d'élements ? Et que je puisse coder par dessus tranquilement ?

J'ai pensé à ajouter un gros rectangle blanc sur le dessus de mon background afin de simuler la fin de mon background mais je pense que c'est une mauvaise solution qui alourdit le code pour rien.

Voici mon HTML :


<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">

	<title>fond responsive</title>

		

</head>
<body>

	<!-- Image de fond -->
<style>

	body {
	    background-image: url(img/dechano.jpg);
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-attachment: fixed;
	    background-position: center;
	}
</style>
<!-- FIN d'Image de fond -->
<!--Menu-->
	<nav class="menu">
		<ul> 
			<li><a href="">Accueil</a></li>
			<li><a href="">Portfolio</a></li>
			<li><a href="">Contact</a></li>
		</ul>
	</nav>
<!--Fin Menu-->
<!--LOGO-->
	<div class="logo-wrapper">
	<img class="logo" alt="logo" src="logosite.png" width="25%">
</div>
<!--FIN LOGO-->

<h2 class="h2"> PORTFOLIO </h2>

<!--portfolio-->

<img class="deuxieme" src="img/deuxieme.jpg">



<!--fin portfolio-->

</body>
</html>


Voici mon CSS : 


@font-face  {
	font-family: Adam;
	src:url(Adam.ttf);

}   

nav.menu {
	text-align: center;
    font-size:22px;
    font-family:Adam;
    color:white;
}

nav.menu ul li {
	list-style: none; 
	display: inline-block;
	margin: 35px;

}

.logo-wrapper {
	text-align: center;
}

.h2 {
	display: flex;
	justify-content: center;
	height: 600px;
	align-items: flex-end;
}

.deuxieme {
	width: 100%;
	display: flex;
	height: 1000px;
	align-items: flex-end;
}


Si je n'ai pas été claire, faites le moi remarquer Smiley smile

Merci d'avance pour votre aide.
Bonjour. Une solution serait par exemple de mettre l'image dans une div dédiée, elle sera ainsi plus facile à gérer.
Mais du coup il serait possible de couper le background comme je veux faire ?

J'ai cherché je ne trouve pas de balises qui permettent de réaliser cette action
Modérateur
albanodev a écrit :
Mais du coup il serait possible de couper le background comme je veux faire ?

J'ai cherché je ne trouve pas de balises qui permettent de réaliser cette action


Il n'y a pas de balise en CSS, juste des sélecteurs.
Si la zone portfolio est incluse dans une balise, un fond a cette balise cacheras celui de body/html,
Si tu donne une hauteur à l’élément qui contient ton background, ici BODY et comme c'est HTML qui gére l'overflow cela peut fonctionner ,
background-size/background-repeat est aussi une solution,
enfin de multiple background composé d'un gradient translucide puis opaque peut aussi permettre de cacher en partie un autre gradient ou image.

A quelle hauteur veut tu couper visuellement cet image de fond ? y-a t-il une autre image a montrer ? Si l'idée est celle d'un effet paralax, il se peut que transform3D ait à être impliqué aussi.

Cdt
Sujet clos
Aller à