1486 sujets

Web Mobile et responsive web design

Background en css

Bonjour,
sur un site en construction, je n'arrive pas à rendre responsive les images background distribuées en css (et non en html avec la balise img).
J'ai tenté "background-size: contain; object-fit: contain;" plus d'autres combinaisons. Rien à faire, quand je descend dans la résolution d'écran, les images ne sont pas rétrécies, elles sont simplement coupées sur leurs côtés. J'ai aussi tenté de mettre "contain" sur les images en haute résolution, mais je n'ai pas non plus de résultats.
C'est un site "one page", avec défilement du contenu sur un background fixe et changement progressif pour un background suivant, au scroll.
La partie du css qui distribue les images :

.bg-1 {
  background-image: url(Images/Acacia-C.JPG);
}
.bg-1-1 {
  background-image: url(Images/Acacia-C.JPG);
}
.bg-2 {
  background-image: url(Images/3-4.png); 
}
.bg-2-1 {
  background-image:  url(Images/3-4.png); 
}
@media(max-width: 480px){
.bg-1 {
        background-image: url(Images/Acacia-480.JPG);
        object-fit: contain;
    }
.bg-1-1 {
        background-image: url(Images/Acacia-480.JPG);
        object-fit: contain;
        }
.bg-2 {
        background-image: url(Images/3-4-480.png);background-size: contain;
        object-fit: contain;
        }
.bg-2-1 {
        background-image: url(Images/3-4-480.png);background-size: contain;
        object-fit: contain;           
    }

Merci pour l'aide sur ce problème.
Salut Bongota, ça devrait fonctionner mais préviens moi dans le cas contraire (;

background-size: cover;

Par ailleurs pourquoi est-ce que tu ne regroupe pas tes éléments ( sauf si tu n'as montré ici qu'une petite partie du code )

.bg-1, .bg-1-1 {
  background-image: url("Images/Acacia-C.JPG");
}

.bg-2, .bg-2-1 {
  background-image: url("Images/3-4.png"); 
}

Modifié par vzytoi (03 Sep 2020 - 16:53)
Bonjour,
les guillemets, oui, oubliés !
Le regroupement, je n'y avait pas pensé... Bien vu.
Oui, je ne montre qu'une partie du code, le reste étant identique en ce qui concerne les images.
Je me replonge dans le code, après deux mois d'interruption, mais j'avais laissé le même problème début juillet, je n'ai rien touché depuis.
Et background-size: cover; n'a rien changé à mon problème, je crois que j'avais déjà essayé.
Merci, je continue sur ce problème, le dernier sur le site avant mise en ligne.
Ton code fonctionne en responsive, effectivement, mais ce ne sera pas facile de le transposer sur l'ensemble du site.
Demain, je vais remettre en service mon serveur personnel, y mettre provisoirement le site, afin que tu puisse voir plus précisément le problème.
A plus.
Voilà le lien provisoire, sur mon serveur perso :
http://bongotata.hd.free.fr
Le site n'étant pas finalisé, notamment le mixage des morceaux de musique, je demande de se pencher pour le moment sur le principal problème, à savoir les images non responsives du background. Ce qui n'empêche pas de pointer des défauts de code par ci par là. Et le site n'est pas indexé sur les moteurs de recherche à ce stade.
Sujet clos
Aller à