Background & Containers
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Background & Containers
Détails techniques
Version du forum : phpBB3Poste 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
Re: Background & Containers
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):
par
Ç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
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
Re: Background & Containers
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.
Re: Background & Containers
Au plaisir ! N'hésite pas o/
Re: Background & Containers
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. |
Sujets similaires
» second background?
» background
» problème de Background
» background sur texte
» Superposition de Background
» background
» problème de Background
» background sur texte
» Superposition de Background
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum