Расширить фон за элемент div

Question

Можно ли расширить элемент background в элементе div вне фрейма div?

И дополнительный вопрос, касающийся найденного мной обходного пути:

Я поместил <img> в свой HTML-код, расположенный за моим основным контентом. Это правильно отображает все фоновое изображение, но есть полосы прокрутки, расширяющие всю длину изображения, и, конечно, изображение можно выбрать. Есть ли способ убрать полосы прокрутки и сделать это изображение недоступным для выбора?

Причина, по которой я не помещаю фоновое изображение в стиль CSS body, заключается в том, что я хочу, чтобы фон был прикреплен к моему контенту при изменении размера окна браузера.

Answer 1

«Возможно ли расширить фоновый элемент в div за пределами рамки div»

Вы можете создать иллюзию того, что это происходит, просто отрегулировав значения полей и отступов в 2 деления. Это чистый CSS, верхний элемент div может вырасти настолько высоким, насколько вы этого захотите. Нижний элемент div должен быть заданной высоты. Я проверил это на нескольких браузерах и не нашел никаких проблем ...

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

Надеюсь, это поможет! А вот обновленный jsfiddle , так что вы можете сразу увидеть, как он выглядит

Answer 2

Вопрос 1: Нет.

Вопрос 2. Используйте свойство background-image вместо <img>. Вы можете поместить это в содержащий <div> позади вашего контента или в том же поле, что и ваш контент. Использование background-image не даст вам полос прокрутки.

Answer 3

Попробуйте использовать дополнительную оболочку <div> и установите для нее фоновое изображение.

Answer 4

Вы можете разместить фоновое изображение за пределами вашего подразделения, но используйте позиционирование CSS, чтобы сохранить его в нужном месте при изменении размера браузера. Распространенным решением является то, что фоновая позиция установлена ​​в центре, как и деление, которое удерживает их в одном месте.

Answer 5

Возможно, я не вижу в своей голове именно то, что вы хотите ... но есть CSS-атрибуты для удаления полос прокрутки из элементов, просто используйте свойство overflow и установите его в скрытое.

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

Если вы просто пытаетесь запретить полосы прокрутки в DIV, то есть. Если вы знаете размер изображения или оно всегда будет одинаковым, просто установите ширину и высоту DIV равными изображению, и оно должно отображать все это.

Насколько я знаю, нет способа сделать фоновое содержимое больше, чем элемент, отображающий его.

Answer 6

Может быть, вам стоит попробовать использовать этот фон изображения из CSS, и тогда другие элементы не будут автоматически изменять размер?