28160 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai ajouté une image de fond dans un jumbotron. Celle-ci n'est pas entièrement visible. La taille affichée dépend de la quantité de texte contenu dans le jumbotron. Voici mon code (css à isoler dans fichier .css) :
 		<div class="container" style="background-color:rgba(255,255,255,0.5);">
 			<div class="jumbotron jumbotron-fluid p-4 p-md-5 text-white rounded" 
  			 	 style="background: linear-gradient(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)),url('img/facade-gite-moelan-sur-mer-ti-goudoul-ori.jpg') no-repeat 
  			 	 center center; background-size: cover;"> 
    			<div class="col-md-6 px-0 pl-20" >
      				<h1 class="display-4 font-italic text-white">Un gîte à Moelan&nbsp;sur&nbsp;mer</h1>
      				<p class="lead my-3 text-white" style="font-size:30px;">pour vous ressourcer en bord de mer. <br>Découvrez un gîte familial proche du port du Bélon et de la plage de Kerfany-les-Pins.</p>
					<hr>
					<div id="ConstellationButtonContainer18eb044c-55d6-4a3a-b34a-8f4c99d60a66" style="width:100%; text-align:center;" title="G&#238;te ti Goudoul" data-id-projet='18eb044c55d64a3ab34a8f4c99d60a66'>Chargement en cours...</div> <script type="text/javascript" src="https://reservation.elloha.com/Scripts/widget-loader.min.js?v=39"></script> <script type="text/javascript">var constellationWidgetUrl18eb044c55d64a3ab34a8f4c99d60a66, constellationTypeModule18eb044c55d64a3ab34a8f4c99d60a66; constellationWidgetUrl18eb044c55d64a3ab34a8f4c99d60a66 = 'https://reservation.elloha.com/Widget/BookingButton/18eb044c-55d6-4a3a-b34a-8f4c99d60a66?idoi=ea656146-3952-43ab-8211-01dc39b3fc1e&culture=fr-FR'; constellationTypeModule18eb044c55d64a3ab34a8f4c99d60a66=3; constellationBookingButtonLoad('ConstellationButtonContainer18eb044c-55d6-4a3a-b34a-8f4c99d60a66');</script>
    				<br/>
    				<hr/>
    			</div>
			</div>
		</div>
Bonsoir,
Le problème est que je ne vois l'image dans son intégralité. La part d'image qu'affiche le jumbotron est fonction de la hauteur du texte qui y est affiché. Est-ce normal ?
Merci par avance.
Bonjour,

C’est effectivement normal et dû à la propriété
background-size: cover;
qui stipule que l’image doit couvrir tout le jumbotron, quitte à être tronquée.

Pour voir l’intégralité de l’image — mais avec, par conséquent, une partie du jumbotron sans image d’arrière-plan — vous pouvez utiliser la valeur
contain


Pour découvrir les autres valeurs possibles, vous pouvez vous référer à la documentation de background-size sur MDN.
Modifié par Ten (29 Oct 2019 - 09:20)
Meilleure solution