[Résolu] Background responsive par ArthurChaigne2 - page 1

Bonjour,

J'ai un problème au niveau de mon background sur l'image ci-dessous:

Lorsque je diminue la fenêtre l'image n'occupe plus toute la place de sa div, et ça donne ça:

Avant l'image se répétait mais j'ai mit un background-repeat : no-repeat.

Voici le css concerné:

.container2{
  background:#2b4156 ;
  width:50%;
  height:96%;
  display:flex;
  flex-direction: column;
  z-index:1;
  /*background-image:url(pictoAvion.svg);*/
}
.souscontainer1{
  color:white;
  background-image:url(image1.jpg);
  background-repeat: no-repeat;
  max-width: 100%;
  max-height: 100%; 
  z-index: 2;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  background-size: 100%;
  background-position: left;
  width: 100%;
  height: 55%;
  display:flex;
  flex-direction: column;
  justify-content: center;
}
.souscontainer2{
  color:white;
  background:#2b4156;
  flex-direction: row;
  width: 100%;
  height: 45%;
  z-index: 2;
}

Et le code html:

<html>

<head>
	<title>A3WEB</title>

	<link type="text/css" rel="stylesheet" href="style/page.css" >
	<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet"> 
	<link href="https://fonts.googleapis.com/css?family=Yellowtail&display=swap" rel="stylesheet">
	<script src = "https://www.google.com/recaptcha/api.js" async defer> </script> 
</head>

<body>

<div class="container">
	<div class="container1">
		<img src="style/logo_a3web.svg" alt="logo a3web" class="logo"/>	
		<div class="paragraphe">
			<div class="clair">Le service </div><div class="fonce">A3W</div><div class="clair">n'est plus ouvert à la création de nouveaux sites internet</div>
			<div class="fonce">_</div>
			<br>
			<div class="cidessous">Vous pouvez toutefois rechercher les sites existants en utilisant le moteur de recherche ci-dessous.</div>
		</div>
		<button href="#" class="recherche"><img src="style/pictoloupe.svg" alt="" class="loupe"/>&nbsp;RECHERCHER UN SITE CRÉE SUR A3W</button>
		<img src="style/petitpoint.svg" alt="points" class="point"/>
	</div>


<div class="container2">
	<div class="souscontainer1">
		<div class="#">
			<div class="phrase1">Vous avez un projet web ,</div>
			<div class="phrase2">contactez-nous !</div>
		</div>
		
		<br>

		<div class="contact">
			Par téléphone au 02 52 45 00 10 <br> ou vous pouvez remplir le formulaire de contact ci-dessous
		</div>
	</div>


	<div class="souscontainer2">
		<img src="style/pictoAvion.svg" alt="avion" class="avion"/>
		<div class="formulaire">
			<fieldset class="societe"><input type="text"><legend>&nbsp;Société&nbsp;</legend></fieldset>
			<fieldset class="nom"><input type="text"><legend>&nbsp;Nom&nbsp;</legend></fieldset>
			<fieldset class="prenom"><input type="text"><legend>&nbsp;Prénom&nbsp;</legend></fieldset>
			<fieldset class="email"><input type="text"><legend>&nbsp;E-mail&nbsp;</legend></fieldset>
			<fieldset class="telephone"><input type="text"><legend>&nbsp;Téléphone&nbsp;</legend></fieldset>
			<fieldset class="message"><input type="text"><legend>&nbsp;Message&nbsp;</legend></fieldset><br>
			<div class="conditions"><input type="checkbox" class="check">&nbsp;En soumettant ce formulaire, vous acceptez que les informations saisies soient exploitées dans le cadre de votre droit à l'oubli en contactant la société A3Web par téléphone ou par le biais du formulaire de contact.</div><br></br>
			<a  href="#" class="envoyer">ENVOYER</a>
			
			<form action = "?" method = "POST" class="captcha" > 
				<div class = "g-recaptcha" data-sitekey = "6LfcMKgUAAAAAMuFoX_V3shUhFKeBAQUh4Up-xxg">
				</div>
				<!-- <input type = "submit" value = "Submit"> -->
			</form>		
		</div>	
	</div>


</div>

	<div class="container3">
		<div class="fin"><a class="mentions" href="#">Mentions légales</a> • <a class="politique" href="#">Politique de confidentialité</a></div>
	</div>
</div>

</body>

</html>

Merci de votre aide,

ArthurChaigne2

12 juin 2019 à 8:41:19

MrRise

12 juin 2019 à 19:09:15

Bonjour, j'essaye de comprendre ce que tu désire , tu veux que tout le site soit réduit en miniature quand tu diminue la taille de la fenêtre ?

Si c'est le cas, je te conseille d'essayer de mettre ton formulaire en % lui aussi pour le width ....

Pourquoi faire simple quand on peut faire compliqué ?

Background responsive

Background responsive

Supprimer

Modérer

Signaler le message aux modérateurs