#html #css #xhtml
#HTML #css #xhtml
Вопрос:
Я пытался установить изображение в качестве фонового изображения для моего приложения django. Но когда я его устанавливаю, оно отображается в виде плиточного изображения. т.е. фактически без растягивания изображения одно и то же изображение разбивается на плитки и отображается 4 раза. Может кто-нибудь сказать мне, как растянуть изображение и установить его в качестве фонового изображения. Я вставлю сюда свой код. Я уверен, что там должен быть какой-то атрибут, устанавливающий это, который я не смог найти в Google.
<body bgcolor=" #408080" background="/static/paper.jpg" background-size: 100%; >
Комментарии:
1. Это не работает должным образом, потому что вы используете устаревшую разметку и пытаетесь использовать свойство CSS3 в качестве атрибута элемента.
2. Это не связано ни с Django, ни с Python.
3. Почему бы вам не изменить размер изображения до нужных пропорций, прежде чем использовать его в качестве фона? Разве это не помогло бы также улучшить качество?
Ответ №1:
Вместо использования фонового изображения в теге body вам следует добавить тег изображения прямо под body, установить абсолютную позицию и низкий z-индекс, а затем иметь width = 100% и height = 100%.
Комментарии:
1. Не исказит ли это изображение, нарушив соотношение сторон?
Ответ №2:
Вам нужно применить это как стиль, а не как атрибут. Это сработает, если ваш браузер поддерживает CSS 3:
style="background: url(/static/paper.jpg); background-size: 100%;"
Некоторая справочная информация:
Ответ №3:
Короче говоря: нет, вы не можете растянуть фоновое изображение с помощью html / css1 / css2, у вас есть только варианты — либо использовать css3 (witch не полностью поддерживается всеми браузерами), либо использовать свойства background-attachment и background-repeat css для достижения альтернативного результата …
Другим вариантом было бы использовать тег img в качестве фона с использованием z-index css proprety, однако вам будет сложно заставить его работать должным образом во всех основных браузерах.
Ответ №4:
Вы можете растянуть свой фон до 100% ширины и высоты, поместив свое изображение в <img> тег и присвоив ему z-индекс, равный -1, чтобы оно действовало как фон и скрывалось за всем остальным. Это работает во всех браузерах.
<img src="..." />
img{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
Если вы не хотите нарушать соотношение сторон, просто установите либо ширину, либо высоту, а не оба варианта.
Проверьте рабочий пример на http://jsfiddle.net/UXBRM/1 /
Ответ №5:
Отредактируйте свое изображение с помощью paint. Щелкните изображение и сохраните свое изображение в соответствии с вашими потребностями.
Это, безусловно, будет работать в любом html.
Ответ №6:
Как упоминают другие, вы всегда должны пытаться определять как можно больше атрибутов в вашем css, а не напрямую, где у вас есть путь к самому изображению. Именно так это было сделано давным-давно и устарело, и, вероятно, поэтому это не работает.
используйте img src=»poefwpf.png» и, возможно, для простого редактирования в вашем css:
#imgex img {
width: 100%;
height: 100%;
(maybe also z-index:-1;)
}