MyBB.support, le portail francophone de MyBB
[Réglé] Faire défilé son background - Version imprimable

+- MyBB.support, le portail francophone de MyBB (https://mybb.support)
+-- Forum : Plug-ins et modules pour MyBB (https://mybb.support/forum-32.html)
+--- Forum : Support (https://mybb.support/forum-15.html)
+--- Sujet : [Réglé] Faire défilé son background (/thread-6611.html)

Faire défilé son background - Azexor - 07-08-2013


Re bonjour,


Voila j'ai essayé de rechercher sur le forum mais je n'est pas vu de sujet similaire au mien. Mon header est fixé sur le forum, il suffis de ce rendre tout en bas pour voir qu'il s'arrête et qu'une autre image s'affiche.

Je souhaiterais que mon header ce déroule en même temps que le la molette quand ont descend ou remonte pour la lecture. Afin que cela ne laisse aucun trou et qu'on ne voyent que le Background installé.

Ou alors un autre système qui permettra justement qu'on voyent que celui installé.

Cordialement,
Azexor

RE: Faire défilé son background - Saphir - 07-08-2013

Vous pouvez ajouter la propriété "background-attachment: fixed;" à votre arrière-plan s'il est défini avec la propriété "background-image", ou, s'il est défini avec la propriété "background", y ajouter simplement le statut "fixed".

RE: Faire défilé son background - Azexor - 07-08-2013

Ou je peux définir cette propriété ? ^^

RE: Faire défilé son background - Saphir - 07-08-2013

Tout dépend de l'emplacement de votre fond, sur votre forum, je ne vois aucun fond qui ne se répète pas correctement...

RE: Faire défilé son background - Azexor - 07-08-2013

C'est normal j'ai agrandi l'image est pris un nouveau Background, mais j'aurais aimé conservé l'ancien.

RE: Faire défilé son background - spyto - 07-08-2013

Alors remets l'ancien si tu veux qu'on puisse voir ! Shy

RE: Faire défilé son background - Saphir - 07-08-2013

Remettez l'ancien fond, puis donnez-nous le contenu de votre global.css.

Administration -> Templates & Style -> Thèmes -> (Votre Thème) -> global.css
Cliquez en haut à droite sur "Mode Avancé", copiez le contenu et collez-le ici.

RE: Faire défilé son background - Azexor - 07-08-2013

Code :
body {
    background: #3a2120 url(images/accord-envy/header.png) repeat-x;
    color: #dedede;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    line-height: 1.4;
        width: 90%;
        margin: 0 auto;
}

a:link {
    color: #7fab38;
    text-decoration: none;
}

a:visited {
    color: #7fab38;
    text-decoration: none;
}

a:hover, a:active {
    text-decoration: underline;
}

#container {
    background: url(images/accord-envy/content-bg.png) top left;
    color: #000000;
    position: relative;
    top: 30px;
    padding: 20px;
    clear: both;
    margin-bottom: 40px;
}

#content {
    
    width: auto !important;
}

.logo {
    float: left;
        margin-top: 40px;
}

.menu {
    font-family: 'Comfortaa';
        letter-spacing: -.5px;
    float: right;
        margin-top: 50px;
        font-size: 24px;
}

.menu ul {
    color: #fff;
    font-weight: bold;
    text-align: right;
    padding: 4px;
    list-style: none;
    margin: 0;
}

.menu li {
    display: inline;
        padding-left: 20px;
}

.menu ul a:link {
    color: #a3a3a3;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}

.menu ul a:visited {
    color: #a3a3a3;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
    color: #fff;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
        text-shadow: 0 0 10px #fff;
}

#panel {
    color: #dedede;
    font-size: 11px;
}

#panel a:hover {
    color: #dedede;
        text-decoration: none;
}

#panel #top {
    margin-bottom: -8px;
}

#panel #bottom {
    padding-top: 5px;
}

#panel hr {
    color: #444;
        background: #444;
}

#panel .cp-links {
    float: right;
}

#panel .cp-links a {
    margin-left: 20px;
}

#panel .cp-links a img, #panel .links a img {
    vertical-align: top;
        padding-right: 10px;
}

#panel a.logout {
    margin-left: 10px;
}

#panel a.logout img {
    padding-left: 10px;
        vertical-align: top;
}

#panel .other-links a {
    margin-right: 15px;
}

#panel .remember_me input {
    vertical-align: middle;
    ymargin-top: -1px;
}

.loginusername {
    background: #3f3f3f url(images/accord-envy/username.png) 10px 6px no-repeat;
        border: 1px solid #606060;
        padding: 6px 2px 6px 30px;
        color: #dedede;
        margin-right: 15px;
}

.loginpassword {
    background: #3f3f3f url(images/accord-envy/password.png) 10px 6px no-repeat;
        border: 1px solid #606060;
        padding: 6px 2px 6px 30px;
        color: #dedede;
        margin-right: 15px;
}

.loginbutton {
    background: url(images/accord-envy/login-button.gif) top left repeat-x;
        height: 30px;
        width: 90px;
        border: none;
        text-transform: uppercase;
        color: #dedede;
}

.loginbutton:hover {
    background: url(images/accord-envy/login-button-hover.gif) top left repeat-x;
        cursor: pointer;
}

.register {
    float: right;
        font-size: 16px;
}

.register img {
    padding-left: 5px;
        vertical-align: middle;
}

table {
    color: #dedede;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

.tborder {
    background: #3f3f3f;
    width: 100%;
    margin: auto auto;
}

.thead {
    background: #6b9034 url(images/accord-envy/thead.gif) top left repeat-x;
        height: 35px;
        padding-top: 0;
        padding-bottom: 0;
    color: #ffffff;
}

.thead a:link {
    color: #ffffff;
    text-decoration: none;
}

.thead a:visited {
    color: #ffffff;
    text-decoration: none;
}

.thead a:hover, .thead a:active {
    color: #ffffff;
    text-decoration: underline;
}

.tcat {
    background: #1f1f1f;
    color: #dedede;
    font-size: 12px;
}

.tcat a:link {
    color: #dedede;
}

.tcat a:visited {
    color: #dedede;
}

.tcat a:hover, .tcat a:active {
    color: #dedede;
}

.trow1 {
    background: #292929;
}

.trow2 {
    background: #292929;
}

.trow_shaded {
    background: #ffdde0;
}

.trow_selected td {
    background: #779151;
}

.trow_selected td a {
    color: #dedede;
}

.trow_sep {
    background: #555;
    color: #dedede;
    font-size: 12px;
    font-weight: bold;
}

.tfoot {
    background: #6b9034 url(images/accord-envy/thead.gif) top left repeat-x;
        height: 35px;
        padding-top: 0;
        padding-bottom: 0;
    color: #ffffff;
}

.tfoot a:link {
    color: #ffffff;
    text-decoration: none;
}

.tfoot a:visited {
    color: #ffffff;
    text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
    color: #ffffff;
    text-decoration: underline;
}

.bottommenu {
    background: none repeat scroll 0 0 #292929;
        border-top: 1px solid #3F3F3F;
        color: #000000;
        margin: 10px -20px -20px;
        padding: 15px;
}

.bottom-links a {
    margin-right: 15px;
}

.triangle {
    border-color: #444444 transparent transparent;
        border-style: solid;
        border-width: 10px 0 15px 10px;
        float: left;
        height: 0;
        left: -30px;
        position: relative;
        top: 13px;
        width: 0;
}

.navigation {
    color: #000000;
        font-size: 13px;
        font-weight: bold;
        left: -40px;
        margin: 40px 0 -10px;
        position: relative;
        top: -35px;
}

.navigation a.navbit:link {
    background: #555;
        padding: 9px 10px 10px 10px;
    color: #fff;
}

.navigation a.navbit:visited {
    background: #555;
        padding: 9px 10px 10px 10px;
    color: #fff;
}

.navigation a.navbit:hover, .navigation a.navbit:active {
    text-decoration: none;
}

.navigation .active {
    background: #555;
        padding: 9px 10px 10px 10px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}

.nav-sep {
    position: relative;
        top: 13px;
        margin: 0 -4px;
}

.nav-sep-active {
    position: relative;
        top: 13px;
        margin: 0;
}

.smalltext {
    font-size: 11px;
        color: #dedede;
}

.largetext {
    font-size: 16px;
    font-weight: bold;
}

input.textbox {
    background: #555;
    color: #dedede;
    border: 1px solid #666;
    padding: 1px;
}

textarea {
    background: #555;
    color: #dedede;
    border: 1px solid #666;
    padding: 2px;
    font-family: Verdana, Arial, Sans-Serif;
    line-height: 1.4;
    font-size: 13px;
}

select {
    background: #555;
    border: 1px solid #666;
        color: #dedede;
}

.editor {
    background: #444;
    border: 1px solid #333;
}

.editor_control_bar {
    background: #555;
    border: 1px solid #666;
}

.autocomplete {
    background: #555;
    border: 1px solid #666;
    color: #dedede;
}

.autocomplete_selected {
    background: #777;
    color: #dedede;
}

.popup_menu {
    background: #666;
    border: none;
}

.popup_menu .popup_item {
    background: #555;
    color: #dedede;
}

.popup_menu .popup_item:hover {
    background: #666;
    color: #dedede;
}

.trow_reputation_positive {
    background: #ccffcc;
}

.trow_reputation_negative {
    background: #ffcccc;
}

.reputation_positive {
    color: green;
}

.reputation_neutral {
    color: #dedede;
}

.reputation_negative {
    color: red;
}

.invalid_field {
    border: 1px solid #f30;
    color: #f30;
        background: #555;
}

.valid_field {
    border: 1px solid #0c0;
        background: #555;
        color: #dedede;
}

.validation_error {
    background: url(images/accord-envy/invalid.gif) no-repeat center left;
    color: #f30;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_success {
    background: url(images/accord-envy/valid.gif) no-repeat center left;
    color: #00b200;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_loading {
    background: url(images/accord-envy/spinner.gif) no-repeat center left;
    color: #555;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

img {
    border: none;
}

.clear {
    clear: both;
}

.hidden {
    display: none;
    float: none;
    width: 1%;
}

.hiddenrow {
    display: none;
}

.selectall {
    background-color: #FFFBD9;
    font-weight: bold;
    text-align: center;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

#panel .links {
    margin: 0;
    float: right;
}

.expcolimage {
    float: right;
    width: auto;
    vertical-align: middle;
    margin-top: 3px;
}

img.attachment {
    border: 1px solid #E9E5D7;
    padding: 2px;
}

hr {
    background-color: #000000;
    color: #000000;
    height: 1px;
    border: 0px;
}

fieldset {
    border: 1px solid #777;
}

#copyright {
    font: 11px Verdana, Arial, Sans-Serif;
    margin: 0 0 30px 0;
    padding: 10px 0 0 0;
        color: #dedede;
}

#debug {
    float: right;
    text-align: right;
    margin-top: 0;
}

blockquote {
    border: 1px solid #ccc;
    margin: 0;
    background: #fff;
    padding: 4px;
}

blockquote cite {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    font-style: normal;
    display: block;
    margin: 4px 0;
}

blockquote cite span {
    float: right;
    font-weight: normal;
}

blockquote cite span.highlight {
    float: none;
    font-weight: bold;
    padding-bottom: 0;
}

.codeblock {
    background: #fff;
    border: 1px solid #ccc;
    padding: 4px;
}

.codeblock .title {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    margin: 4px 0;
}

.codeblock code {
    overflow: auto;
    height: auto;
    max-height: 200px;
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
}

.subforumicon {
    border: 0;
    vertical-align: middle;
}

.separator {
    margin: 5px;
    padding: 0;
    height: 0px;
    font-size: 1px;
    list-style-type: none;
}

form {
    margin: 0;
    padding: 0;
}

.popup_menu .popup_item_container {
    margin: 1px;
    text-align: left;
}

.popup_menu .popup_item {
    display: block;
    padding: 3px;
    text-decoration: none;
    white-space: nowrap;
}

.popup_menu a.popup_item:hover {
    text-decoration: none;
}

.autocomplete {
    text-align: left;
}

.subject_new {
    font-weight: bold;
}

.highlight {
    background: #FFFFCC;
    padding-top: 3px;
    padding-bottom: 3px;
}

.pm_alert {
    background: #FFF6BF;
    border: 1px solid #FFD324;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
    margin-bottom: 15px;
}

.red_alert {
    background: #FBE3E4;
    border: 1px solid #A5161A;
    color: #A5161A;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
    margin-bottom: 15px;
}

.high_warning {
    color: #CC0000;
}

.moderate_warning {
    color: #F3611B;
}

.low_warning {
    color: #AE5700;
}

div.error {
    padding: 5px 10px;
    border-top: 2px solid #FFD324;
    border-bottom: 2px solid #FFD324;
    background: #FFF6BF;
    font-size: 12px;
}

div.error p {
    margin: 0;
    color: #000;
    font-weight: normal;
}

div.error p em {
    font-style: normal;
    font-weight: bold;
    padding-left: 24px;
    display: block;
    color: #C00;
    background: url(images/error.gif) no-repeat 0;
}

div.error.ul {
    margin-left: 24px;
}

.online {
    color: #15A018;
}

.offline {
    color: #C7C7C7;
}

.pagination {
    font-size: 11px;
    padding-top: 20px;
    margin-bottom: 5px;
        color: #dedede;
}

.tfoot .pagination, .tcat .pagination {
    padding-top: 0;
}

.pagination .pages {
    font-weight: bold;
        margin-right: 5px;
}

.pagination .pagination_current, .pagination a {
    padding: 2px 6px;
    margin-bottom: 3px;
}

.pagination a {
    border: 1px solid #777;
        background: url(images/accord-envy/login-button-hover.gif) top left repeat-x;
        color: #dedede;
        padding: 5px 10px;
}

.pagination .pagination_current {
    border: 1px solid #779151;
        background: url(images/accord-envy/thead.gif) top left repeat-x;
        color: #dedede;
        padding: 5px 10px;
}

.pagination a:hover {
    text-decoration: none;
        background: url(images/accord-envy/thead.gif) top left repeat-x;
    border: 1px solid #779151;
}

.thread_legend, .thread_legend dd {
    margin: 0;
    padding: 0;
}

.thread_legend dd {
    padding-bottom: 4px;
    margin-right: 15px;
}

.thread_legend img {
    margin-right: 4px;
    vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
    margin: 0;
    padding: 0;
    text-align:center;
}

.forum_legend dd {
    .forum_legend dd {
    float: left;
    text-align; left;
    margin-right: 10px;
    margin-top: 15px;
}


}

.forum_legend dt {
    margin-right: 10px;
    float: left;
    text-align:center;
}

.success_message {
    color: #00b200;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.error_message {
    color: #C00;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.post_body {
    padding: 5px;
}

.post_content {
    padding: 5px 10px;
}

.quick_jump {
    background: url(images/jump.gif) no-repeat 0;
    width: 13px;
    height: 13px;
    padding-left: 13px;
    vertical-align: middle;
    border: none;
}

.repbox {
    font-size:16px;
    font-weight: bold;
    padding:5px 7px 5px 7px;
}

._neutral {
    background-color:#3f3f3f;
    color: #dedede;
    border:1px solid #555;
}

._minus {
    background-color: #FDD2D1;
    color: #CB0200;
    border:1px solid #980201;
}

._plus {
    background-color:#E8FCDC;
    color: #008800;
    border:1px solid #008800;
}

.pagination_breadcrumb {
    background-color: #3f3f3f;
    border: 1px solid #555;
    padding: 10px 5px;
    margin-top: 5px;
    font-weight: normal;
}

.pagination_breadcrumb_link {
    background: #555555;
    cursor: pointer;
    margin: 0 0 0 -4px;
    padding: 9px 0 10px;
    position: relative;
    top: 13px;
}

#lang_select {
    margin-top: -5px;
}

.forum_legend {
   width: 886px;
   margin: 0 auto;
}


Voila j'ai remis l'ancien Header et voila la feuille.

RE: Faire défilé son background - Saphir - 07-08-2013

Sur la deuxième ligne, après "repeat-x", ajoutez " fixed", comme ceci :
Code :
body {
    background: #3a2120 url(images/accord-envy/header.png) repeat-x fixed;


RE: Faire défilé son background - Azexor - 07-08-2013

Merci beaucoup ! :p Sujet resolu.

 Utilitaire de traduction fourni par Regentronique