[réglé] Background qui dépasse

Bonjour,

Mon problème :

Je voudrais afficher un bande horizontal en background sur un site. La taille du site est limitée à 1000px, du coup, lorsque je met la bande en background, il ne veut pas dépasser les 1000px de son block parent.

Voici un exemple pour mieux comprendre :

http://hpics.li/9c444eb

Comment empêcher cela ? Comment faire en sorte que la background dépasse sans pour autant devoir changer la largeur du site ?

Merci.
Modifié par Chok71 (21 Jun 2013 - 13:21)

Hello,

Cette bande correspond à quoi concrètement ?
Tu peux sortir cette portion du flux du document, en en utilisant le positionnement absolu par exemple.
Utiliser un conteneur différent de celui du "site" et lui donner des propriétés différentes...

C'est une bande qui sert à décorer, et qui s'étend à l'infinie dans la largeur, comme on en voit sur plusieurs sites internet.

Je verrais pour le position absolute.

Merci.
Modifié par Chok71 (17 Jun 2013 - 12:31)

salut,
un background ne débordera jamais son parent et ce qui est logique en somme. Il suffit juste d'englober ton conteneur par un autre, sans passer par les positions absolues. Exemple (en changeant la largeur de "container" à 1000px).

Si c'est purement décoratif, une image de fond sur la balise HTML ou body, répétée sur l'axe des abscisses devrait faire l'affaire, non ?

Perso, je pense que c'est la solution la plus propre. À quoi ça sert une requête en plus juste pour charger une image avec une couleur unie. D'autant que si tu l'appliques à body ça sera du position:absolute qui deviendra vite galère s'il faut à chaque calculer le "top" au redimensionnement.

Je n'ai pas vraiment compris ton code Zelalsan, c'est vraiment bizarre.

Ah bon ? Il n'y a pourtant rien de compliqué. Tu auras deux types de conteneurs, un premier (.wrapper) qui occupera toute la largeur du navigateur et un autre (.container), contenu dans le premier, qui aura une largeur de 1000px et centré.

Zelalsan a écrit :
Perso, je pense que c'est la solution la plus propre.

C'est un point de vue, à moi il me semble que cela surcharge inutilement le code.

Zelalsan a écrit :
À quoi ça sert une requête en plus juste pour charger une image avec une couleur unie.

Éviter de surcharger inutilement le code html avec des balises structurelles (qui plus est vide...) ?
Concernant la requête supplémentaire, outre le fait qu'il y a sans doute moyen de ranger cela dans un sprite, c'est assez négligeable tout de même même

Zelalsan a écrit :
D'autant que si tu l'appliques à body ça sera du position:absolute qui deviendra vite galère s'il faut à chaque calculer le "top" au redimensionnement.

Pas sûr de te suivre là

Bref, il n'y a pas de solution unique, ni universelle, cette dernière dépendra de tes besoins.
Si ce "bloc de déco" ne contient rien, il y a peut-être même moyen de le faire avec du contenu généré (:after/:before).
Fais des tests, retiens la solution la plus robuste, celle qui te convient et qui fonctionne le mieux

a écrit :
C'est un point de vue, à moi il me semble que cela surcharge inutilement le code.

En quoi cela surcharge le code ?

a écrit :
Éviter de surcharger inutilement le code html avec des balises structurelles (qui plus est vide...) ?
Concernant la requête supplémentaire, outre le fait qu'il y a sans doute moyen de ranger cela dans un sprite, c'est assez négligeable tout de même même

Ça tombe bien, parce qu'un div peut être vide et sert justement à structurer le doc Une requête reste un requête, sachant que tu ne pourras caser les sprites à répétition horizontale qu'entre eux, si tu n'en utilises qu'un, ça reviendra exactement au même. La logique m'échappe. Faire appel à une image quand c'est tellement plus simple de le faire directement.

a écrit :
Pas sûr de te suivre là Smiley sweatdrop

Faudrait que tu donnes un exemple, c'est moi qui ne te suis pas trop. Comment comptes-tu appliquer l'image ? Même question que pour les contenus générés ?

@Zelalsan

A vrai dire:
1 - Je ne vois pas bien l'utilité du truc au départ (purement décoratif ? Pas de contenu sur cette bande ?)
2 - Je suis arbitrairement parti du postulat que l'image montrait l'idée de ce Chok71 voulait obtenir, et qu'au final ce serait un poil plus "travaillé" que cet aplat de couleur.
3 - J'ai 39 de fièvre, et je ferai mieux de retourner au dodo, mais ça m'excuse un peu si je raconte des bêtises

Dans l'absolu, j'aurai surement utilisé quelque chose de similaire à ta proposition, notamment pour l'utilisation d'une image répétée (et dans le cas d'une déco plus complexe), un "wrapper" en ligne et un "inner-wrapper" de la largeur du site. Ce qui fonctionne également avec une couleur de fond unie.
L'idée d'affecter une image de fond à la balise body ou html ne vaut que si le design s'y prête (pas de couleur de fond pour le site par exemple), mais ça fonctionne, sans rajouter de marquage spécifique pour cet élément de décoration par exemple

Concernant le contenu généré, j'avais pensé à quelque chose dans ce style mais je suis loin d'être fier du résultat, et je suis trop nase pour chercher autre chose

J'exagère sans doute en disant que tu surcharges le code, mais je continue à penser que ces balises structurantes doivent servir à regrouper du contenu (que l'on décore, positionne par la suite via CSS) mais qu'il y a moyen de se servir de l'existant pour faire ces effet de décoration afin de garder le code le plus lisible possible, sans utiliser de conteneur vide
(Merci pour le rappel sur la fonction et l'utilité des DIV )

Bon, pourtant, ça semble assez cohérent dans mon esprit très embrouillé
Je file me coucher, oubliez que je suis passé

Et puis fiche la paix à ma requête (ce n'est pas cela qui va flinguer les performances du site )!

Je te répond aussi à moitié dans les vaps après un someil impromptu de narcoleptique.
En fait dans ma tête c'était un peu plus complexe, j'ai pensé à un truc plus général qui pourrait se faire à volonté d'où peut être l'exclusion des contenus générés.
Pour l'image, toujours dans l'optique de refaire ça plusieurs fois, c'était le positionnement qui m'aurait gêner.
Bon j'ai perdu le fil et je m’endors en tapotant sur le clavier. Je pense que si c'est à utiliser une fois ça pourrait plus se faire avec du contenu généré, si non j'aurais utilisé ma méthode et comme tu dis, il n'existe pas de technique universelle.

a écrit :
Et puis fiche la paix à ma requête (ce n'est pas cela qui va flinguer les performances du site Smiley cligne )!

J'en connais qui n'auraient pas apprécié.
Bon rétablissement à toi.

Bonjour,

J'ai finalement opté pour la solution de 6l20.

Merci de votre aide.