Taille de l'image du footer

[Plümpheit]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://laserenissime.forumactif.org

Description du problème

Bonsoir

Je viens d’installer un footer sur mon forum dont voici le code :

Code:

/*IMAGE FOOTER -------------------------------------------------*/
  #page-footer {
    background-image: url(http://www.artisangamestudios.com/assets/images/footer-corner.png);
    background-position: bottom center;
  background-repeat: no-repeat;
    height: 300px;
    margin-top: 0px;
 
    width: auto;
}

Voici le problème que je rencontre. Je souhaitait que ce dernier face toute la largeur du forum.
Il y a aussi une petite marge tout en bas que je voudrais supprimer.

Comment faire ?

Merci d'avance ♥

[Pinky-mango]

Bonjour,
Je me suis permise de répondre à ce problème puisque je connais la solution.

Pour ajuster la grandeur d'un background il faut ajouter la propriété background-size.

Pour qu'un background fasse toute la largeur d'un élément il suffit de mettre:

Code:

background-size:100% auto;

La première valeur est la largeur et l'autre la hauteur. Comme on veut que ça fasse toute la largeur on met 100% et auto pour la hauteur pour ne pas déformer l'image.

On peut aussi mettre:

Code:

background-size:cover;

Ce qui va faire que ton background va remplir tout l'espace en hauteur et largeur (sans étirer). Par contre, soit la hauteur ou la largeur va être coupée pour pouvoir s'ajuster à l'élément qui a un background.

N'hésite pas à me dire si mes réponses t'ont bien aidé pour résoudre ton problème.


Bonne journée!

[Plümpheit]

Merci beaucoup pour tes conseils, mais hélas cela ne marche pas pas et je pense savoir pourquoi. Mais je ne sais pas comment le résoudre.

En fait le footer est raccordé à "l’intérieur du cadre du forum" (ici en transparent mais l'on peut y mettre une couleur). Sauf qu'il faudrait qu'il soit rattaché à l'image de fond. Je sais pas si je suis claire par contre et si je m'exprime bien...

Donc ta fonction fonctionne très bien, puisqu'il prend toute la largueur de l’intérieur du cadre du forum... Mais c'est à un autre endroit qu'il faudrait le mettre...

[◦Jay◦]

Bonjour Plümpheit, j'ai fait un essai sur ce forum test en insérant votre image en fond de page et j'ai ajouté une marge sur le fond du forum, comme ceci :

Code:

 body {
    background-image: url(http://www.artisangamestudios.com/assets/images/footer-corner.png);
background-repeat: no-repeat;
background-position:bottom;
background-size:100% auto;
margin-bottom:15%;}


Pensez à décocher "fond de page fixe" dans vos images à "Image du fond de page"

Bien à vous.

[Plümpheit]

Bonsoir et merci...

Mais ça ne marche pas chez moi

Y'a même plus du tout de footer

Et à la base je voulais une image fixe. J'ai pas envie que ça bouge derrière...

[◦Jay◦]

Il n'y a pas de raison que ça ne marche pas chez vous... vous pouvez regarder sur le forum test, je l'ai à présent mis avec le fond de page fixe : http://forumtestjay.forumactif.org (j'ai pris une image quelconque sur le net pour exemple)

Comme ceci :

Code:

body{background-image:url('http://www.artisangamestudios.com/assets/images/footer-corner.png'), url(http://eskipaper.com/images/pattern-wallpaper-9.jpg);
background-size:100%,100%;
background-repeat:no-repeat,no-repeat;
background-position:bottom;
background-attachment: scroll,fixed;
margin-bottom:15%;}

Cordialement.

[Plümpheit]

Bon sur le coup ça marchait pas, donc j'ai réécrit mon CSS et il faut croire que l'erreur venait de là! Mais il me reste un soucis ^^, c'est l'image de fond qui déconne!
On y est presque XDD

Il y a une bande noire toute en haut .

C'est quelle commande pour que la hauteur soit en auto ?

[◦Jay◦]

Bonjour, ce serait plus simple si vous donniez le forum concerné.

EDIT : Arrrrf, c'est peut-être ma faute, ré-écrivez le code que je vous ai donné hier comme ceci > (avec vos images)

Code:

body{background-image:url('http://www.artisangamestudios.com/assets/images/footer-corner.png'), url(http://eskipaper.com/images/pattern-wallpaper-9.jpg);
background-size:100%,100%;
background-repeat:no-repeat,no-repeat;
background-position:bottom,top;
background-attachment: scroll,fixed;
margin-bottom:15%;}

[Plümpheit]

Je suis désolée, voici le forum en question
http://l-obscure-clarte.forumactif.com/

La bande noir qui était en haut est désormais en bas >0< . Merci de m'aider au fait
En fait si l'image pouvait se déformer juste sur la hauteur (et se répéter si elle veut en largeur) parce que c'est des rayures alors c'est pas grave :p

[◦Jay◦]

Bonsoir Plümpheit, je me suis permis de retoucher votre image, j'espère que cela vous conviendra :

Code:

body{background-image:url('http://www.artisangamestudios.com/assets/images/footer-corner.png'), url(https://i.goopics.net/eR5YD.jpg);
background-size:100%,100%;
background-repeat:no-repeat,no-repeat;
background-position:bottom,top;
background-attachment: scroll,fixed;
margin-bottom:15%;}


Si toutefois vous souhaitez garder votre image et qu'elle remplisse le fond, il faut mettre le code comme ceci :

Code:

body {
    background-attachment: scroll,fixed;
    background-image: url(http://www.artisangamestudios.com/assets/images/footer-corner.png), url(http://www.zupimages.net/up/17/40/sefg.png);
    background-position: bottom,top;
    background-repeat: no-repeat,no-repeat;
    background-size: 100%,cover;
    cursor: url(http://zupimages.net/up/17/31/7a8r.png), auto;
    margin-bottom: 15%;
}

Le problème est que votre image(initiale) n'est pas très haute et il y a un vide en bas à droite mais cela ne se voit pas avec le footer. C'est pour cette raison que j'en ai fait une nouvelle.

Bien à vous.

[Plümpheit]

Merci beaucoup pour tout et votre patience également.

Je prend avec l'image retouchée


Encore merci ♥