1485 sujets

Web Mobile et responsive web design

Image qui dépasse la grille ?

Bonjour,
je débute et je fais un site en responsive (grille à 12 colonnes) et j'aimerais mettre dans le header une image de fond qui le dépasse en haut, à droite et à gauche.
Ma question est : est-ce possible ?
1. En effet si je met mon image au début du header sans la mettre en background avec un code css :
.imgheader {
	width: 111.1%; /* pour lui permettre de dépasser */
	margin: -2% 0% 0% -6.1%; /* pour lui permettre de dépasser */
	}

cela marche, mais je ne peux empiler du texte dessus : il passe en dessous de cette image avec des margin corrects.
2. Si je la mets en background, je n'arrive pas à l'ajuster correctement !
Y-a-t-il une solution simple ?
Mettre une colonne vide de chaque côté et ne garder que 10 colonnes pour le reste serait-il une solution ?
Merci d'avance
Un peu bizarre cette demande.

S'il faut que l'image de fond dépasse par çi par là, peut-être l'appliquer à la balise <body> bien que je connaisse pas le design du site....et ajuster la taille et le positionnement (background-size et background-position).
Bonjour,
justement, je n'y arrive pas. le background-position et le background-size coupe l'image au niveau de la grille.
Ce que j'obtiens dans mon site actuel à gauche, à droite, avec une grille car je refais mon site en responsive. La flèche représente la limite de ma page.
upload/1500277269-44994-capture-daeacran-2017-07-17-a.gif .
Merci
Honnêtement, je n'arrive pas à visualiser (comprendre) quoi que ce soit.

Est-ce possible de mettre sur un codepen, jsfiddle ou mieux votre serveur? pour voir le code

J'ai besoin de savoir si c'est une grille "fait-maison" ou un boostrap, knacks....
Modifié par allan00958 (17 Jul 2017 - 14:11)
Bonjour,
comme je l'ai dit, je débute et une autre discussion (grid area) m'a informé que les grid-area n'étaient pas pris par les navigateurs microsoft.
Ma grille est maintenant extrêmement simple : 2 colonnes seulement avec le fameux header sur 2 colonnes, une colonne gauche et un main sur 1 colonne chacune et enfin un footer sur les deux colonnes.
body {
    display: grid;
    grid-template-columns:  repeat(2, 1fr);
   grid-auto-rows: minmax(100px, auto);	
}

Or je voudrais que cette fichue image se montre entièrement et puisse dépasser à drotre et à gauche. J'ai utilisé background-size: cover et background-size: contain;, mis des marges etc, j'ai même créé une grille à 4 colonnes avec le header et le footer sur 4 et la colonne et le main sur 1 colonne chacun…… Smiley bawling
Peut-on le faire ou j'ai vu que certain site n'utilisaient la grille pour tout sauf le header.
Merci
Sujet clos
Aller à