Mon image d'arrière plan ne s'adapte pas correctement

Tout ce qui est développement WEB.
Maxime.V
Piou-Piou
Piou-Piou
Messages : 10
Inscription : 07 sept. 2016, 20:51

Mon image d'arrière plan ne s'adapte pas correctement

Messagepar Maxime.V » 09 févr. 2018, 16:26

Salut tout le monde :)

Alors voilà pour les examens de fin d'année nous devons tous présenter un portfolio, pour les réseaux nous devions utiliser un CMS, mais personnellement j'ai décider de coder mon propre portfolio en HTML et CSS.

Cependant j'aimerais avoir votre aide à propos de mon image de fond qui ne s'adapte pas correctement, je m'explique, cette image de fond est en réalité le background de mon élément body, or mon body à ces caractéristiques suivantes ce qui lui donne comme taille de l'ensemble des blocs qu'il contient.

Code : Tout sélectionner

body
{
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background-color: #ecf0f1;
   background-image: url("../images/background.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   color: #2c3e50;
   font-family: 'Barlow Semi Condensed', sans-serif;
}


et donc lorsque le contenu de mon body à une taille inférieure à celle de la résolution de l'écran du client, il reste un bord blanc :

petit_body.png
petit_body.png (906.65 Kio) Consulté 102 fois


alors qu'avec un body plus grand il n'y a pas de problème (deuxième pièce jointe).

grand_body.png
grand_body.png (754.36 Kio) Consulté 102 fois


J'aimerais donc savoir si l'un d'entre vous avait une solution pour pallier à ce problème, personnellement je pensais redimensionner le bloc en js selon la résolution du client mais pour le moment je débute vraiment en développement web et j'ai pas encore trop touché au js ...

Avatar de l’utilisateur
maxence
Piou-Piou
Piou-Piou
Messages : 15
Inscription : 05 sept. 2016, 15:27

Re: Mon image d'arrière plan ne s'adapte pas correctement

Messagepar maxence » 11 févr. 2018, 02:15

j'ai pas la réponse à ton problème mais en tout cas il est super beau ton portfolio :D

Maxime.V
Piou-Piou
Piou-Piou
Messages : 10
Inscription : 07 sept. 2016, 20:51

Re: Mon image d'arrière plan ne s'adapte pas correctement

Messagepar Maxime.V » 11 févr. 2018, 12:10

Pas grave et merci ! :D

Avatar de l’utilisateur
Alex
Deuxième année
Deuxième année
Messages : 99
Inscription : 10 sept. 2016, 17:11

Re: Mon image d'arrière plan ne s'adapte pas correctement

Messagepar Alex » 12 févr. 2018, 09:28

Salut Maxime,

Pour résoudre ton problème, utilise CSS3.
Avec les media queries, tu peux gérer un CSS différent en fonction de plusieurs attribut définit par CSS3 et parmi ces choses tu as le "screen" qui correspond à l'écran.
Tu peux donc gérer les couleurs, les tailles de tes blocks, bref ce sera un css qui sera utilisé que lorsque la condition sera rempli, exemple :

Code : Tout sélectionner

@media screen and (min-width: 800px)
   {
       /*Ici, tes propriétés CSS en fonctions de la taille */
   }


Ici j'ai mis un taille minimal seulement donc tous les écran avec une largeur inférieur à 800 pixels n'auront aucun changement, mais tu peux très bien ne pas le faire et utilisé une fourchette de taille qui effectue ce CSS et rien d'autre dans cette fourchette. Bref j'espère que tu as compris vaguement, sinon tu as ces sites.

https://openclassrooms.com/courses/appr ... ia-queries

https://www.w3schools.com/cSS/css_rwd_mediaqueries.asp

https://developer.mozilla.org/fr/docs/W ... ia_queries

Si ton problème n'est pas ça, reformule parce que j'ai vraiment pas bien compris :lol:


PS : Si ton body ne s'agrandit pas si son contenant est de petite taille, adapte la taille de ton contenant. Tu dit que le body fait 100%, sauf que si 100% c'est la taille de ton contenant (ex : 500px d'hauteur) il va pas aller plus loin que la taille du contenant.
En espérant t'avoir aidé...
" Étudie, non pour savoir plus, mais pour savoir mieux. "

Maxime.V
Piou-Piou
Piou-Piou
Messages : 10
Inscription : 07 sept. 2016, 20:51

Re: Mon image d'arrière plan ne s'adapte pas correctement

Messagepar Maxime.V » 12 févr. 2018, 14:14

Merci pour ta réponse Alexandre ! :)

Je connaissait déjà les media queries, j'en utilise déjà pour quelques petites choses, mais finalement j'ai trouvé une solution plus simple.

Il suffit d'utiliser min-width et min-height avec des unités mieux adaptées : :lol:

Code : Tout sélectionner

body
{
   min-width: 100vw;   /* cela correspond à 100% de longueur de la fenêtre du client (viewport width)*/
   min-height: 100vh;   /* cela correspond à 100% de hauteur de la fenêtre du client (viewport height)*/
   margin: 0;
   padding: 0;
}


Merci https://www.w3schools.com/cssref/css_units.asp :lol:

Voilà le résultat :
resolu.png
resolu.png (956.09 Kio) Consulté 38 fois

Avatar de l’utilisateur
Alex
Deuxième année
Deuxième année
Messages : 99
Inscription : 10 sept. 2016, 17:11

Re: Mon image d'arrière plan ne s'adapte pas correctement

Messagepar Alex » 12 févr. 2018, 14:36

Bah voilà ! Merci du partage et beau résultat ;)
" Étudie, non pour savoir plus, mais pour savoir mieux. "

Maxime.V
Piou-Piou
Piou-Piou
Messages : 10
Inscription : 07 sept. 2016, 20:51

Re: Mon image d'arrière plan ne s'adapte pas correctement

Messagepar Maxime.V » 12 févr. 2018, 14:40

De rien, et en tout cas merci de ta réponse :D


Revenir vers « PHP, Javascript, HTML »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité