CSS la Bodyline en image

[elsa2607]

coucou,

Je voudrais modifier la bodyline de mon forum : je voudrait la remplacer par une image (de papier déchirer) Exemple. je veux que le fond reste sous cette bodyline (réglages normaux) mais je voudrais que la bannière passe au dessus de la bodyline voici un mini schéma:


Merci à quiconque pourra m'éclairer

[Lixyr]

Bonjour,

Si j'ai bien compris vous voulez mettre ces images en fond de la classe bodyline, sur le côté. Il faudrait que vous donniez les deux images, avec une rotation pour qu'elles soient dans le bon sens.

[elsa2607]

Voici :


Je voudrais soit que : les images soient fixent et qu'il n'y ai que le contenu qui bouge soit que ce soit un papier peint et que les images mises les unes sur les autres défilent également.
Mais je voudrais que ça n'aille pas plus haut que la barre de navigation si possible car je voudrais mettre un header plus grand que le cadre de la bodyline.

Merci

[Lixyr]

Et bien... Pour que ça n'aille pas plus haut que la barre de navigation il va falloir bidouiller, car la classe bodylinewidth prend toute la hauteur du cadre, donc même la bannière.
Il faut donc mettre une image transparent à la place du logo du forum, ensuite mettre le logo du forum en fond, et mettre un margin-top pour la classe bodyline pour descendre le cadre.

Sinon, pour avoir les deux images en fond du bodyline il faut faire ainsi :

Code:

table.bodylinewidth {
background: url(http://i.imgur.com/c97ILzX.png) repeat-y left top,
url(http://i.imgur.com/KaGgEqY.png) repeat-y right top;
}

Code:

bodyline {
background: url(http://i.imgur.com/c97ILzX.png) repeat-y left top,
url(http://i.imgur.com/KaGgEqY.png) repeat-y right top;
}

[elsa2607]

Coucou et merci
Pour le logo je vais débrouiller avec un Float je pense ou alors je vais laisser la même taille sinon cela va être trop compliqué . Donc pour le code ça fonctionne mais elles ne sont pas assez écartée et le background de la page n'apparaît plus.

http://graphisyabeta.graphforum.com/

[Lixyr]

Le soucis c'est que comme votre image est transparente, si vous mettez un fond, comme noir, alors la transparence ne se verra plus. Bref, ça donnera quelque chose de tout noir.
Donc je vous conseille de mettre les images de fond dans le bodylinewidth, ensuite de changer la taille de la classe bodyline pour qu'elle prenne par exemple 80% de la largeur, avec un fond noir, comme ça on verra le fond transparent, et le fond noir.

Code:

.bodyline {width: 80%;background-color: #000000;}

Sinon on peut tricher et mettre les deux images en fond du body. Ensuite on paramètre ça pour que le logo ne soit pas compris dedans :
- on ne répète plus le fond, comme ça on peut créer une marge en haut :
- on positionne les images à une certaine hauteur par rapport au logo
- on met le fond fixé, comme ça c'est le forum qui défile, et l'image reste fixe sans recouvrir ou entourer la bannière.
- on remet le fond noir dans le bodylinewidth pour que le tout soit noir.

Code:

body {
        background: url(http://i.imgur.com/c97ILzX.png) no-repeat 0% 0%,
        url(http://i.imgur.com/KaGgEqY.png) no-repeat 100% 0%;
        }

=> ensuite vous changez les valeurs

background: url(https://i.imgur.com/c97ILzX.png) no-repeat 0% 0%,
url(https://i.imgur.com/KaGgEqY.png) no-repeat 100% 0%;

pour que ça se décale par rapport au haut du forum.

Normalement le fond est fixé par défaut. Si ce n'est pas le cas, il faut rajouter ça avant l'accolade fermante :

Code:

background-attachement: fixed;

Et enfin le fond noir :

Code:

table.bodylinewidth {
        background-color: #000000;
        }

[elsa2607]

Je suis pas sûre d'avoir tout compris mais de toutes les façons essayées ça ne fonctionne pas :
Si on met background-color: XXX + background url(img) il choisis automatiquement le fond noir uni sans afficher les images (c'est soit l'un soit l'autre)

Le fond général ne doit pas bouger. (le noir clair au bord) Y a t'il un moyen de ne faire qu'une seule image de fond (contenant les deux bords + le milieu (fond noir) en "fixé" ?


Merci beaucoup de l'attention portée sur mon cas .

[Lixyr]

Le background-color ne doit pas être mis dans la même classe :
- image pour body
- fond noir pour bodylinewidth

Sinon il y a moyen de mettre les deux images sur le même calque (à vous de le faire) mais ça revient au même :
- image de fond dans le body
- couleur dans le bodylinewidth


*edit*

Bon j'ai fait des tests sur mon forum test :


On ne peut pas décaler le fond car l'image est trop grande, du coup ça prend quand même toute la hauteur.
Le mieux serait que vous fassiez une seule image, dans laquelle vous auriez le fond gris spirale, les bordures déchirées et la bannière, qu'on mettra en fond, avec une bannière transparente. Ça sera plus simple, et plus concluant.

*double-edit*

Finalement avec une valeur négative ça se décale.
Vous pouvez me faire une schéma de ce que vous voulez (avec les images), que je vois la meilleure façon d'aboutir au résultat ?

[elsa2607]

Et hop voila :



Encore merci du temps accordé

[Lixyr]

D'accord.

Voici le CSS :

Code:

body {
  background:
    url('http://i.imgur.com/c97ILzX.png') no-repeat 8% 0% fixed,
    url('http://i.imgur.com/KaGgEqY.png') no-repeat 92% 0% fixed,
    url('http://i.imgur.com/gSgewBO.png') repeat 0% 0% fixed;
}
.bodylinewidth {width: 900px;background-color: #000000;}
.bodyline {background-color: transparent;border: none;}

.forumline {background-color: #414141 !important;border: 2px solid #000;}
.forumline td, .forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right {background: none transparent;}


et le résultat obtenu :

Vous pouvez enlever la partie concernant la classe forumline si ça vous dérange.

[elsa2607]

Quelle rapidité merci,
Alors étant temporairement sur mon mini asus de 10"-12" pouces, pour voir les forums en entiers je dois dé-zoomer a l'aide de mon navigateur (Ctrl -) Donc je regardais mon forum test sous 75% de sa taille normale. et là, tout fonctionnais :3 parfaitement (a l'exeption du fond noir qui ne va pas jusqu'en haut ni jusqu'en bas :

En revenant au zoom par défaut 100%, les déchirures repassent sous le fond car elles ne sont pas assez écartées.

[Lixyr]

Ok, alors pour ne pas avoir de problème avec la résolution, le mieux c'est de définir la largeur du forum en pourcentage, comme l'écart entre les deux fonds. Ensuite, pour l'écart en haut, ça s'enlève.
Tout ça se passe au niveau de la classe bodylinewidth. Remplacez la ligne actuelle par celle-ci :

Code:

.bodylinewidth {width: 75%;background-color: #000000;margin: -8px auto;}

(Ca donne ça en entier) :

Code:

body {
  background:
    url('http://i.imgur.com/c97ILzX.png') no-repeat 8% 0% fixed,
    url('http://i.imgur.com/KaGgEqY.png') no-repeat 92% 0% fixed,
    url('http://i.imgur.com/gSgewBO.png') repeat 0% 0% fixed;
}
.bodylinewidth {width: 75%;background-color: #000000;margin: -8px auto;}
.bodyline {background-color: transparent;border: none;}

.forumline {background-color: #414141 !important;border: 2px solid #000;}
.forumline td, .forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right {background: none transparent;}


[Scoubifitz]

bonsoir,

je me permet d'intervenir ...

pourquoi ne pas simplement mettre les 2 images sur le bodylinewidth et coloriser le fond du bodyline ?

un padding pour écarter les 2 images et un margin négatif pour "coller" en haut et en bas du forum :

Code:

.bodylinewidth {
background: url(http://i.imgur.com/c97ILzX.png) repeat-y left top,
url(http://i.imgur.com/KaGgEqY.png) repeat-y right top;
padding:0 140px;
margin:-10px auto;
}
.bodyline {
background-color: black;
}

[elsa2607]

Lixyr : rien ne change avec le pourcentage.
Merci beaucoup pour votre aide !

Scoubifitz : Merci beaucoup ça marche parfaitement
Si je change la largeur des images de coté, va il me falloir modifier le padding ?

[Lixyr]

C'est la première façon que j'avais proposée, et qui ne fonctionnait pas, car la demande était plus poussée. Mais l'une ou l'autre manière se valent, il faut juste savoir bidouiller ensuite.

Votre forum est très large, pour modifier l'espacement des images (si je reprend mon code) il faut modifier ces valeurs :

body {
background:
url('https://i.imgur.com/c97ILzX.png') no-repeat 8% 0% fixed,
url('https://i.imgur.com/KaGgEqY.png') no-repeat 92% 0% fixed,
url('https://i.imgur.com/gSgewBO.png') repeat 0% 0% fixed;
}

=> pour la première, c'est l'image de gauche
=> pour la deuxième, c'est l'image de droite
si vous réduisez la valeur, ça se décale vers la gauche, si vous augmentez ça se décale vers la droite.

Avec le code de Scoubifitz, effectivement, si vous modifiez les images et qu'elles sont plus petites, il faudra réduire le padding. D'ailleurs, vous pouvez le réduire maintenant, si l'espace est trop grand (de mon côté, ça prend tout l'écran).

[Scoubifitz]

le padding est légèrement plus petit que les images pour mieux coller aux bordures

en augmentant (ou diminuant) la valeur du padding , on fait bouger l'image .

image plus grande = padding plus grand

[elsa2607]

C'est la première façon que j'avais proposée, et qui ne fonctionnait pas, car la demande était plus poussée. Mais l'une ou l'autre manière se valent, il faut juste savoir bidouiller ensuite.

Ah pardon je n'avais pas bien compris, je pense que pour le logo du forum je mettrais un float si je veux que ça dépasse. En tous cas merci

Je n'ai pas l'écran suffisamment grand pour m'en rendre compte mais es-ce mieux comme ça ? : http://graphisyabeta.graphforum.com/

[Scoubifitz]

en résolution 1440x900 :

[elsa2607]

Merci beaucoup.

[Lixyr]

Ah pardon je n'avais pas bien compris, je pense que pour le logo du forum je mettrais un float si je veux que ça dépasse. En tous cas merci

Le float n'est pas fait pour ça. Le mieux serait d'utiliser une position, de placer l'image à une certaine distance du top, et de la bordure gauche ou droite de l'écran, et de descendre le forum.
Genre comme ça :

#i_logo {position: fixed /*ou absolute*/;top: xpx;left: xpx;width: xxxpx;height: xxxpx }

.bodylinewidth {[...]; margin-top: xxxpx;}

> en changeant les xx ou xxx de couleur par les valeurs qui correspondent à ce que vous voulez.
> le fixed fixe la bannière, si vous ne voulez pas qu'elle reste au défilement vous mettez absolute à la place.

Enfin bref, ça c'est une autre histoire. Repostez un sujet si vous avez des soucis avec la bannière. Pour ma part, ça s'affiche bien aussi, sur petit écran.