Étendre l'arrière-plan au-delà de l'élément div

Question

Est-il possible d'étendre un élément background dans un div à l'extérieur du cadre div?

Et une question de suivi se rapportant à une solution que j'ai trouvé:

J'ai mis <img> dans mon code HTML placé derrière mon contenu principal. Cela affiche correctement toute l'image de fond, mais il y a des barres de défilement qui s'étendent sur toute la longueur de l'image et bien sûr l'image est sélectionnable. Est-il possible de supprimer les barres de défilement et de rendre cette image non sélectionnable? La raison pour laquelle je ne mets pas l'image d'arrière-plan dans le style body du CSS est que je veux que l'arrière-plan soit attaché à mon contenu lorsque la fenêtre du navigateur est redimensionnée.

Answer 1

Peut-être que vous devriez essayer d'utiliser cet arrière-plan de l'image à partir de CSS, puis les autres éléments ne seront pas redimensionnés automatiquement?

Answer 2

Je ne vois peut-être pas dans ma tête exactement ce que vous voulez ... mais il existe des attributs CSS pour supprimer les barres de défilement des objets, utilisez simplement la propriété overflow et mettez-la à hidden.

http://www.w3.org/TR/CSS2/visufx.html#overflow

Si vous essayez juste d'empêcher les barres de défilement sur la DIV qui est. Si vous connaissez la taille de l'image, ou qu'elle sera toujours la même, il suffit de définir la largeur et la hauteur de la DIV pour qu'elle soit la même que l'image et qu'elle affiche tout. Pour autant que je sache, il n'y a aucun moyen de rendre le contenu d'arrière-plan plus grand que l'élément qui l'affiche.

Answer 3

Essayez d'utiliser un wrapper supplémentaire <div> et définissez l'image d'arrière-plan sur celle-ci.

Answer 4

Question 1: Non

Question 2: Utilisez la propriété background-image au lieu de <img>. Vous pouvez placer cela dans un <div> contenant derrière votre contenu, ou dans la même boîte que votre contenu. L'utilisation de background-image ne vous donnera aucune barre de défilement.

Answer 5

Vous pouvez mettre votre image d'arrière-plan en dehors de votre division, mais utiliser le positionnement CSS pour le conserver au bon endroit lorsque vous redimensionnez le navigateur. Une solution courante est que la position de l'arrière-plan est mise au centre et que la division, qui les maintient au même endroit, l'est également.

Answer 6

« Est-il possible d'étendre un élément de fond dans un div en dehors du cadre div »

Vous pouvez donner l'illusion qu'il fait simplement en ajustant les valeurs de marge et de rembourrage 2 DIV. C'est du CSS pur, le div le plus haut peut devenir aussi grand que vous le voulez aussi. La div du bas doit être une hauteur fixe. J'ai testé cela sur plusieurs navigateurs et n'ai pas encore trouvé de problèmes ...

<div id="top" style="padding:0 0 300px 0; margin:0 auto -700px; background:red;" > 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
my top content which can grow in height as much as possible.<br /><br /> 
</div> 

<div id="bottom" style="margin:400px 0 0; padding:0; height:300px;"> 
my bottom content at a set height - required!<br /><br /> 
</div> 

Espérons que cela aide! Et voici un updated jsfiddle afin que vous puissiez voir à quoi il ressemble tout de suite