Background & Containers

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Background & Containers

Message par Sanystal Jeu 21 Mai 2020 - 22:06

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Opera
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : https://mithridia.forumactif.com

Description du problème

Bonjour à tous !

Je rencontre à l'heure actuelle un problème majeur (parmi tant d'autres mais c'est sans doute car je n'ai jamais touché de prog de ma vie), concernant la mise en place d'un background des suites de la modification d'un thème.

Je n'ai absolument pas touché les templates ou quoi que ce soit d'autre jusqu'à présent et je me suis contenté de coucher un peu ce que je voulais sur la stylesheet CSS.

Le problème est le suivant :

J'ai mis en place un "Background test" sur le forum avec des dimensions suffisantes, ce dernier est centré et est censé prendre toute la page, malheureusement quand je le met en place via le CSS avec un simple body, j'ai (Containeur_Container_IE) relativement gênant en bas qui me coupe littéralement le background en deux.

J'ai bien essayé du coup de mettre le background directement dans le container, mais cela me force à mettre une image de header et ce n'est pas ce que je recherche.

Ce qui m'intéresserait est tout simple : Avoir un background de mon choix en full sur la totalité du forum et me servir du header afin de positionner un logo (et non comme une vraie image de header du coup).

Je vous joint ici le triste CSS que j'ai mis en oeuvre tant bien que mal jusqu'à présent.

Code:
/*--------------Header--------------------*/

div.headerbar {background-image:url() no-repeat center center fixed; ;
   background-size:100%;
   background-color: ;
   background-position:top center;
   height:280px;
   border-bottom:0px solid #fadf84;}

.headerbar {
    background-color: #1d262c00;
}

/*--------------------------NavBar-------------------------------------*/

.is-sticky#conteneur_container_IE-top{background-color:#000;
   background-repeat:no-repeat;
   border-bottom:1px solid #fadf84;
   box-shadow:0 0 15px #000;}

.navbar a{color:#fadf84;
   font-weight:700;
   font-size:12px;}

.navbar a:hover{background-color:#000;}

.navbar img:hover{
   -webkit-filter: brightness(1000%) !important;
   -o-filter: brightness(1000%) !important;
   -moz-filter: brightness(1000%) !important;
   filter : brightness(1000%) !important;}

.navbar img{width:100%;
   filter:invert(0);}

a.mainmenu{font-size:0 !important;}

/*----------------------Body background----------------------------*/

body {
   background-image:url(https://i.servimg.com/u/f58/20/20/86/55/12373711.jpg);
   background-repeat:no-repeat;
   background-position:left top;
   background-size: 100%;
   background-attachment: fixed;
}

/*----------------------------BOUTONS------------------------------*/

.button, .button1, .button2, input[type="submit"]{
   display: inline-block;
   font-weight: 800;
   text-align: center;
   color: #f8dd82!important;
   background: #000;
   border-left: 3px solid #f8dd82;
   border-right: 3px solid #b99543;
   background-image: -webkit-linear-gradient(left, #f8dd82, #b99543), -webkit-linear-gradient(left, #f8dd82, #b99543);
   background-size: 100% 2px;
   background-position: 0 100%, 0 0;
   background-repeat: no-repeat;
   background-clip: border-box;
   box-shadow: none!important;}

.button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
   display: inline-block;
   font-weight: 800;
   text-align: center;
   color: #b99543!important;
   background: transparent;
   border-left: 3px solid #b99543;
   border-right: 3px solid #f8dd82;
   background-image: -webkit-linear-gradient(left, #b99543, #f8dd82), -webkit-linear-gradient(left, #b99543, #f8dd82);
   background-size: 100% 2px;
   background-position: 0 100%, 0 0;
   background-repeat: no-repeat;
   background-clip: border-box;
   box-shadow: none!important;}

select{color: #ececec !important;}

/*-----------------------OMBRE FORUM QEEL MODULE---------------------*/

.topiclist,.block,.module,.post,#picture_legend,.panel{box-shadow:0px 0px 3px #FADF84;}

/*----------------------BORDURE STATS--------------------------------*/

.statistics{border-top:3px solid #fadf84;}

/*----------------COULEUR TITRES FORUMS------------------------------*/

a.forumtitle{color:#ececec !important;}
a.forumtitle:hover{color:#ff0000 !important;}

/*-----------------BORDURE MESSAGE-----------------------------------*/

.post-head{border-color:#FADF84;}

/*------------------TAILLE ICONE LEGENDE-----------------------------*/

#picture_legend img, #privmsgs-menu img{height:50px;
   width:50px;}
   dl.icon, ul.forums li.row dl {background-size: 50px 50px!important;}

/*------------------TAILLE MAX FORUM---------------------------------*/

#wrap{max-width:80%;}

/*------------------COULEUR QEEL ET LEGENDE--------------------------*/

#picture_legend,.block,.panel {background-color: rgba(0,0,0,0.7) ;}
      .block-footer {background-color:transparent !important;}

/*-------------------BANNIERRE FOOTER--------------------------------*/

.conteneur_container_IE{background-image:url() !important;
  
   background-position:bottom center;
   background-repeat:no-repeat;
   background-size:100%;
   min-height:800px !important;}
   margin:0;
   padding:0;

/*-----------------SUPPRESSION DESCRIPTION-------------------------*/

.Description_none{display:none;}

   #headerbar-top, #headerbar-top .wrap {
     height:100%;
   }

   #logo{
     display: block;
      height: 80%;
      width: 100%;
}
.postprofile-avatar img {
       border-radius: 0!important;
}
.postprofile-avatar img{width:180px;
   height:230px;}

Je m'excuse si c'est bordélique mais c'est pas vraiment ma tasse de thé de faire mumuse avec du CSS d'habitude ! Pouvez-vous m'éclairer sur ce qu'il faudrait modifier afin d'arriver à mes fins ?

Merci beaucoup par avance !


Dernière édition par Sanystal le Ven 22 Mai 2020 - 2:00, édité 1 fois
Sanystal

Sanystal
Nouveau membre

Messages : 2
Inscrit(e) le : 21/05/2020

https://mithridia.forumactif.com
Sanystal a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background & Containers

Message par mSyx Ven 22 Mai 2020 - 0:00

Salut à toi o/
Alors, je sais pas si la source de ce problème vient de ton CSS ou si c'est celui par défaut, mais il y a un height: 100%; sur le body qui en est la cause principale.

Il y a aussi le fait que l'image que tu utilises est trop petite pour qu'elle couvre entièrement l'écran sans la forcer à le faire. On peut donc régler tout ça, mais tu verras que l'image sera étirée et de qualité très moyenne :/

Du coup, dans le CSS, il faut changer (ligne 40 dans ton code):
Code:
body {
  background-image:url(https://i.servimg.com/u/f58/20/20/86/55/12373711.jpg);
  background-repeat:no-repeat;
  background-position:left top;
  background-size: 100%;
  background-attachment: fixed;
}

par
Code:
body {
  background-image:url(https://i.servimg.com/u/f58/20/20/86/55/12373711.jpg);
  background-repeat:no-repeat;
  background-position:left top;
  background-size: cover;
  background-attachment: fixed;
  height: auto !important;
}

Ça réglera le problème tel que tu le décris, mais pour garder une image de qualité, il faudra en trouver une plus grande :b
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Background & Containers

Message par Sanystal Ven 22 Mai 2020 - 1:56

Re-coucou et merci pour cette réponse rapide !

J'ai bien modifié cette ligne comme mentionné (j'ai même copié-coller le code source que fourni) mais malheureusement le problème demeure. J'ai moi-même pensé à la taille, car je ne te cache pas que cela fait depuis ce matin 10h que je cherche et recherche une solution et trifouille, mais je ne pense pas qu'il s'agisse là d'un problème de taille de l'image par défaut. Le forum est refresh si tu veux jeter un oeil.

Par contre si je peux me permettre un indice, quand je change l'image manuellement directement dans les réglages sans passer par le stylesheet, elle s'affiche correctement sur toute la page sans être tronquée mais elle est en mode repeat et peu importe les manipulations dans le body - c'est à dire quand bien même je tente de forcer le no-repeat via le stylesheet - rien ne se passe.

Je pense qu'il y'a quelque chose de sous-jacent qui cloche si tu ne vois rien de "dérangeant" autre dans ce CSS :/



Petit edit : Finalement ça fonctionne, le petit coquin de navigateur ne m'avait pas refresh le code après validation j'ai du forcer un peu pour que ca rentre.

Problème résolu.

Merci infiniment, je repasserai embêter la commu si je bloque ailleurs. Smile
Sanystal

Sanystal
Nouveau membre

Messages : 2
Inscrit(e) le : 21/05/2020

https://mithridia.forumactif.com
Sanystal a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background & Containers

Message par mSyx Ven 22 Mai 2020 - 2:09

Au plaisir ! N'hésite pas o/
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Background & Containers

Message par Chacha Ven 22 Mai 2020 - 9:34

Background & Containers 4qhGdLE
Bienvenue sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum