Форум

Sveta · #1 (**permalink**) 23.10.2013, 13:31

Добрый день)
Удивилась не найдя такой темы...люди ж наверняка сталкивались с этим...а на всем форуме одна похожая тема и то не совсем то что нужно.
Подскажите пожалуйста...чтобы изображение как бекграунд растягивалось на 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 так вообще не сделать? может можно как-то?

ksa · #2 (**permalink**) 23.10.2013, 14:01

Сообщение от Sveta

чтобы изображение как бекграунд растягивалось на 100% что можно сделать?
...
в старых IE так вообще не сделать?

Именно как фон - такое не сделать...

А вот подложить растянутую картинку "под" нужный элемент - это можно.

danik.js · #3 (**permalink**) 23.10.2013, 14:05

ksa, почему же? Вариант с фильтром ведь так и делает?
Вставлять нужно в css. filter - это такое css-свойство. Только путь к картинке свой прописать.

devote · #4 (**permalink**) 23.10.2013, 14:29

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

ksa · #5 (**permalink**) 23.10.2013, 14:31

Как вариант...

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

ksa · #6 (**permalink**) 23.10.2013, 14:32

Сообщение от danik.js

Вариант с фильтром ведь так и делает?

Я такое не применяю...

Просто делаю подложку...

devote · #7 (**permalink**) 23.10.2013, 14:34

Сообщение от ksa

Я такое не применяю...
Просто делаю подложку...

кому что, но зачем делать лишние элементы. Если делается все стандартным образом. А фильтр для ИЕ также можно засунуть в условие [if lte IE 8] и код чистый, и другие браузеры лишнее не обрабатывают.

ksa · #8 (**permalink**) 23.10.2013, 14:35

Сообщение от devote

но зачем делать лишние элементы

Ты сам дал ответ...

Сообщение от devote

кому что

devote · #9 (**permalink**) 23.10.2013, 14:39

два отдельных 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]-->

и не надо лишних элементов

Sveta · #10 (**permalink**) 23.10.2013, 15:16

Я уже пробовала вставлять

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/sky.jpg', sizingMethod='scale');

в итоге на FF текст на картинке смещается, а в IE8 никаких изменений..не растягивается...даже не знаю что я делаю не так....
Но вот вариант просто подложить картинку мне нравится) надеюсь получится...так просто код сложный, подгружаемый...уфф) так что я пытаюсь правильно настроить css для картинки как подложки.
Спасибо большое за ответы!!!! =*

Форум

Справочник

Discord чат

Курсы javascript