растянуть картинку на 100%
Добрый день)
Удивилась не найдя такой темы...люди ж наверняка сталкивались с этим...а на всем форуме одна похожая тема и то не совсем то что нужно. Подскажите пожалуйста...чтобы изображение как бекграунд растягивалось на 100% что можно сделать? в других браузерах все работает
background: #51892c url("../image/sky.jpg") no-repeat;
-moz-background-size: 100% ; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
Для IE8 я видела такой вариант:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/workshop/graphics/earglobe.gif', sizingMethod='scale');
но не поняла куда это вставлять. А вообще в старых IE так вообще не сделать? может можно как-то? |
Цитата:
А вот подложить растянутую картинку "под" нужный элемент - это можно. :yes: |
ksa, почему же? Вариант с фильтром ведь так и делает?
Вставлять нужно в css. filter - это такое css-свойство. Только путь к картинке свой прописать. |
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ololo {
width: 500px;
height: 500px;
background: #51892c url("http://javascript.ru/forum/images/smilies/smile.gif") no-repeat;
-moz-background-size: 100% ; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://javascript.ru/forum/images/smilies/smile.gif', sizingMethod='scale');
}
</style>
<!--[if lte IE 8]><style type="text/css">.ololo {background-image: none;}</style><![endif]-->
</head>
<body>
<div class="ololo">Добрый день)
Удивилась не найдя такой темы...люди ж наверняка сталкивались с этим...а на всем форуме одна похожая тема и то не совсем то что нужно.
Подскажите пожалуйста...чтобы изображение как бекграунд растягивалось на 100% что можно сделать?
в других браузерах все работает</div>
</body>
</html>
|
Как вариант...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
p {
position: relative;
}
p + p {
margin-top: 5px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<img src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
<p>
Служба Яндекс.Рефераты предназначена для студентов и школьников,
дизайнеров и журналистов, создателей научных заявок и отчетов —
для всех, кто относится к тексту, как к количеству знаков.
</p>
<p>
Нажав на кнопку «Написать реферат» вы лично создаете уникальный
текст, причем именно от вашего нажатия на кнопку зависит, какой
именно текст получится — таким образом, авторские права на реферат
принадлежат только вам.
</p>
</body>
</html>
|
Цитата:
Просто делаю подложку... |
Цитата:
|
Цитата:
Цитата:
|
два отдельных CSS и все ок, основной например main.css и для IE ie.css
и подключаем: <link rel="stylesheet" type="text/css" href="main.css" /> <!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->и не надо лишних элементов |
Я уже пробовала вставлять
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/sky.jpg', sizingMethod='scale'); в итоге на FF текст на картинке смещается, а в IE8 никаких изменений..не растягивается...даже не знаю что я делаю не так.... Но вот вариант просто подложить картинку мне нравится) надеюсь получится...так просто код сложный, подгружаемый...уфф) так что я пытаюсь правильно настроить css для картинки как подложки. Спасибо большое за ответы!!!! =* |
| Часовой пояс GMT +3, время: 23:17. |