Bonjour à toutes et à tous,

Je m'arrache les cheveux depuis plusieurs sur le problème suivant :

J'ai une image (1500px x 844px)en background qui est tronquée (sur smartphones et tablettes) en mode portrait.
En effet, on ne voit qu'environ 50% de l'image.

Tout fonctionne parfaitement sauf ça.
J'ai cherché sur bcp de forums, essayé plein de solutions proposées, aucune ne fonctionne pour mon souci.

Je suis en galère et j'ai besoin vraiment de votre aide.

Merci d'avance



Voici le code dans le "style.css" :

background: url('../images/hero1.jpeg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 100%;
min-height: 100%;
height: 100%;
width: 100%;
display: block;

Voici le code dans le "responsive.css"

@media screen and (max-width: 480px){
/*----- layout ----*/
.grey-bg, .white-bg{
padding: 40px 0;
}
/*---- hero -----*/
.hero-content{
min-width: 280px;
padding: 25px;
}
.menu-wrap{width: 220px;}
.mouse-icon{bottom: 5px;}

/*---- portfolio -----*/
ul.portfolio-image li{
width: 100%;
padding-top: 95%;
}

/*---- blog -----*/
.grid-item {
width: 100% !important;
padding: 0;
}

/*---- quote -----*/
.wrap-about{
padding: 0 0 20px 0;
min-height: 400px !important;
}
.wrap-about .w-content{
left: 0;
right: 0;
width: 100%;
top: 0;
padding: 30px 0;
transform: none;
}


/*------- testimonial -------*/
#testimonial{ height: 700px;}

.skillst {margin-top: 50px;}
}


@media screen and (max-width: 768px){
/*------ header -----*/
.for-sticky{ padding: 0; }
.logo-nav { margin-left: 0;}
.menu-button{margin-right: 15px;}
.ma-infinitypush-wrapper.ma-infinitypush-active-button.ma-infinitypush-button-right .ma-infinitypush-button{
left: -65px;
}
.ma-infinitypush-wrapper{ width: 200px; }
.ma-infinitypush-wrapper ul > li{
width: 200px;
}

/*------- home ------*/
#home p {width: 100%;}

/*----- portfolio -----*/
.portfolio-image > li{
width: 50%;
}


/*---- blog -----*/
.grid-item {width: 50%;}

/*------- about -------*/
.bg-about{min-height: 520px;}
.wrap-about{
min-height: 520px;
padding-bottom: 10%;
padding-left: 30px;
padding-right: 30px;
}
.wrap-about .head-quote{padding-top: 10%;}

.content-right{ margin-top: 20px; }

.text-grey{margin-bottom: 45px;}
.skillst{ margin-top: 50px;}
/*------ footer -----*/
footer p{ text-align: center; }
footer ul.social {
margin-left: -40px;
text-align: center;
}
footer ul.social li {
padding: 0px 10px 0px 10px;
}
}

@media screen and (min-width: 1024px){
.content-right {
margin-top: 20px;
padding: 0 20px 0 60px;
}
}

Voici le bout de code html :

<!--HOME-->
<section id="home">
<div class="container">
<div class="row">
<div class="wrap-hero-content">
<div class="hero-content">

salut,

la taille (100%) c'est par rapport à la taille de l'image pas en fonction de celle du parent.

il faut donc que tu force la taille du background à une taille acceptable pour les cas plus petit ou simplement que tu changes d'images (tailles réduite déjà adaptée).

@+