0
J'essaie de créer une image de fond avec un div plus petit à l'intérieur avec du texte. En ce moment, cela fonctionne très bien sur le bureau, mais comme la taille de l'écran devient plus petite, la div avec le texte va sur l'image de fond.Image d'arrière-plan devrait rezize à div à l'intérieur
Je souhaite que l'image soit redimensionnée automatiquement dans ces cas.
#cb_1 {
background-image: url("https://www.randnotizen.org/wp-content/uploads/full/0019-Elektrotechnik-Platine-Bauteile.jpg");
height: 100%;
margin: 0px;
padding: 0px;
z-index: -1;
}
#cb_1 h1 {
color: #222;
padding-top: 20px;
}
#cb_1 h3 {
color: #356651;
}
#cb_1 p {
color: #222;
padding-top: 30px;
padding-bottom: 40px;
}
#cb_1 article {
background: rgba(255, 255, 255, 0.6);
width: 45%;
padding: 50px 50px;
position: absolute;
top: 100px;
}
button.default {
border-radius: 0px;
background: transparent;
border-style: solid;
border-width: 2px;
border-color: #356651;
color: #222;
font-size: 20px;
font-family: 'Khand', sans-serif;
padding: 5px 20px;
}
h1 {
font-family: 'Khand', sans-serif;
font-size: 43px;
font-weight: 100;
margin: 0px;
padding: 0px;
}
h2 {
font-family: 'Khand', sans-serif;
font-size: 35px;
font-weight: 100;
line-height: 40px;
margin: 0px;
padding: 0px;
}
h3 {
font-size: 18px;
line-height: 25px;
}
p {
font-size: 18px;
line-height: 25px;
}<section id="cb_1">
<div class="container">
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<h3>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
<button type="button" class="default">Stet clita kasd</button>
</article>
</div>
</section>
Salut e avant. Vous avez inclus un ** chemin relatif ** pour l'image dans votre code. Pourriez-vous s'il vous plaît télécharger votre image en ligne, et mettre à jour votre code pour créer un lien vers la version en ligne? Nous ne sommes pas en mesure de voir votre image locale, et il est important de pouvoir voir l'image problématique afin d'aider à résoudre ce problème :) –
Oh désolé, j'utilise moi-même un espace réservé pour le moment. Essayez d'utiliser ce pictutre - c'est à peu près la même taille: https://www.randnotizen.org/wp-content/uploads/full/0019-Elektrotechnik-Platine-Bauteile.jpg – schnitzel
Sur votre '# cb_1' ajouter' fond ' -size: cover; 'pense que c'est ce que tu cherches. Je posterai une réponse si oui. – Gezzasa