Problème d'affichage d'un background en fond de forum

[Ancients]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonsoir,

Voici l'affichage de mon background sur Chrome :

Spoiler:

Voici celui sur Safari :

Spoiler:

J'essaye de garder la largeur des bordures haut et bas et que ça prenne tout l'espace.

Voici l'image de mon background :

Spoiler:

Et pour terminer ma CSS :

Code:

body {
    background-attachment: fixed;
    background-image: url(http://i66.tinypic.com/2ltk4yr.png);
    background-position: center!important;
    background-repeat: repeat-x;
    background-size: 95% auto;
    }

Merci à vous

[Miettes]

Coucou

Euh... y a un souci avec ton background-size non ?

Personnellement, j'aurai plutot mis :

Code:

background-size: auto 100%;

et j'aurai supprimer le background-position (qui ne sert à rien avec un background-size) et le background-attachement (qui, mariait au background-size engendre des bug d'affichage sous safari).

Du coup :

Code:

body {
    background-image: url(http://i66.tinypic.com/2ltk4yr.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    }

[Ancients]

Bonjour mselle,

Ça ne garde pas la largeur des bordures de l'image de fond et ça bug en scrollant aussi : http://nsp-d3.forumofficiel.com/forum

Merci à vous

[MlleAlys]

Bonjour,
Essayez ainsi :

Code:

body {
    background-color: #020403;
    background-image: url(http://zupimages.net/up/16/15/c6ed.bmp), url(http://zupimages.net/up/16/15/d1vk.bmp);
    background-size: auto, auto;
    background-position: top center, bottom center;
    background-attachment: fixed;
    background-repeat: repeat-x, repeat-x;
}

J'ai divisé rapidement le fond : une bande en haut, une bande en bas, et la couleur de fond au milieu, de façon à pouvoir les positionner sans les déformer. Le résultat est-il ce que que vous souhaitez ?

[Ancients]

Bonjour,

Merci pour votre réponse,

Votre code marche très bien sur mes pages sauf sur l'accueil avec la video en background ou un bout de la bordure est tronquée.

Bordure tronquée : http://nsp-d3.forumofficiel.com/forum
Bordure normale : http://nsp-d3.forumofficiel.com/memberlist

Merci à vous

[MlleAlys]

Alors je ne vois pas du tout la bordure sur la page d'accueil, peut être une question de résolution, auriez vous un screen ?
Où et comment exactement avez vous installé votre fond vidéo ?

[Ancients]

Voici la css de la video :

Code:

/*** VIDEO ***/
#video-background {
/*  background: url(http://eu.battle.net/d3/static/images/reaper-of-souls/bg/malthael.jpg) repeat-x;      peut être supprimé */
    background-size: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
/*  transition: 1s opacity;        peut être supprimé */
    z-index: -100;
}

Voici son html :

Code:

<video autoplay="" id="video-background" xmlns="http://www.w3.org/1999/xhtml" loop="loop">
<source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.webm" type="video/webm">
<source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.mp4" type="video/mp4"></video>

La bordure n'est pas entière -->

Merci

[MlleAlys]

(ce qui est intéressant surtout, c'est le fait que vous ayez mis votre vidéo via la page d'accueil du forum, c'est bien ça ?)

Alors votre vidéo est très grande, chez moi elle couvre complètement mon écran, d'où le fait que je ne vois pas du tout les bordures.
Ensuite, ce n'est pas un fond mais un élément positionné en dessous des autres : les bordures étant mises en fond de page, elles seront de toute façon toujours en dessous de la vidéo, d'où le fait qu'elles soient coupées si l'écran n'est pas assez grand.

On peut essayer d'ajouter les bordures comme éléments par dessus la vidéo :

Remplacez le code html de la video par :

Code:

<video autoplay="" id="video-background" xmlns="http://www.w3.org/1999/xhtml" loop="loop">
<source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.webm" type="video/webm">
<source src="http://media.blizzard.com/d3/media/videos/reaper-of-souls/bg/malthael.mp4" type="video/mp4"></video>
<div id="bord-haut"></div>
<div id="bord-bas"></div>

On a ajouté deux blocs vides avec la vidéo. On va dimensionner et positionner ces blocs et mettre les bordures en fond. Ajoutez à ces fins les codes css suivants :

Code:

/*bordures par dessus video accueil*/
#bord-haut, #bord-bas {
  position: fixed;
  left: 0;
  right: 0;
  height: 93px;
  z-index: -99;
  background-repeat: repeat-x;
}
#bord-haut {
  top: 0;
  background: url(http://zupimages.net/up/16/15/c6ed.bmp);
  background-position: top center;
}
#bord-bas {
    bottom: 0;
    background: url(http://zupimages.net/up/16/15/d1vk.bmp);
    background-position: bottom center;
}
/*fin bordures par dessus video accueil*/


[Ancients]

Le rendu est un peu spécial pour la vidéo, mais les bordures sont niquels

http://nsp-d3.forumofficiel.com/forum

[MlleAlys]

Pas chez moi,
attention le css n'était pas à remplacer, mais à ajouter à celui déjà présent pour la vidéo.

[Ancients]

En effet, désolé.

La bordure sur l'index est en double.

J'ai remarqué que le problème venait du padding :

Code:

div#main-content > * {
    padding: 30px 0 30px 20px;
}

J'ai essayé ce code :

Code:

div#main-content > #video-background {
    padding: 0!important;
}

Ce qui centre la video mais ne résout pas le problème de la bordure

http://nsp-d3.forumofficiel.com/forum

Merci pour votre aide

[MlleAlys]

Au code css

Code:

#bord-haut, #bord-bas {
  position: fixed;
  left: 0;
  right: 0;
  height: 93px;
  z-index: -99;
  background-repeat: repeat-x;
}

ajoutez padding: 0 !important; ce qui donne :

Code:

#bord-haut, #bord-bas {
  position: fixed;
  left: 0;
  right: 0;
  height: 93px;
  z-index: -99;
  background-repeat: repeat-x;
  padding: 0 !important;
}

[Ancients]

C'est niquel !
Merci beaucoup, j'apprécie votre aide.

Bonne journée