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

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

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

Message par Ancients le Dim 10 Avr 2016 - 0:24

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 Smile


Dernière édition par Ancients le Mar 12 Avr 2016 - 15:20, édité 1 fois

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par Miettes le Mar 12 Avr 2016 - 11:59

Coucou Smile

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%;
    }

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par Ancients le Mar 12 Avr 2016 - 12:38

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 Smile

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par MlleAlys le Mar 12 Avr 2016 - 12:47

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 ?

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par Ancients le Mar 12 Avr 2016 - 12:59

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

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par MlleAlys le Mar 12 Avr 2016 - 13:08

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 ?

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par Ancients le Mar 12 Avr 2016 - 13:25

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

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par MlleAlys le Mar 12 Avr 2016 - 13:51

(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*/

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par Ancients le Mar 12 Avr 2016 - 14:34

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

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

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par MlleAlys le Mar 12 Avr 2016 - 14:37

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


Dernière édition par MlleAlys le Mar 12 Avr 2016 - 15:08, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par Ancients le Mar 12 Avr 2016 - 14:55

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

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par MlleAlys le Mar 12 Avr 2016 - 15:01

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;
}

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage d'un background en fond de forum

Message par Ancients le Mar 12 Avr 2016 - 15:20

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

Bonne journée Smile

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

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


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