Форум

monolithed · #41 (**permalink**) 10.12.2010, 21:04

ksa, gods33 показываю фокус:

<style type="text/css">
td {position: fixed;}
td img {width: 100%; height: 100%;}
div {background: red; font: 35px/35px sens; margin: 0px auto; position: relative; text-align: center; width: 200px; height: 300px;}
</style>


<table>
    <tr>
        <td>
            <img src="http://javascript.ru/forum/attachments/xhtml-html-css/592d1291988280-razreshenie-ehkrana-i-sootvetstvuyushhijj-emu-fonovyjj-risunok-img132b85a11a73x8e9868bc-jpg" alt="" />
        </td>
    </tr>
</table>

<div>text</div>

<style type="text/css">
td img {width: 100%; height: 100%;position: fixed;}
div {background: red; font: 35px/35px sens; margin: 0px auto; position: relative; text-align: center; width: 200px; height: 300px;}
</style>


<table>
    <tr>
        <td>
            <img src="http://javascript.ru/forum/attachments/xhtml-html-css/592d1291988280-razreshenie-ehkrana-i-sootvetstvuyushhijj-emu-fonovyjj-risunok-img132b85a11a73x8e9868bc-jpg" alt="" />
        </td>
    </tr>
</table>

<div>text</div>

И тот и другой варианты подстраиваются под ширину экрана, только первый сохраняет пропорции (он и нужен), а второй растягивается на всю ширину относительно контейнера (теряет пропорции)

ksa · #42 (**permalink**) 10.12.2010, 21:51

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

показываю фокус

Учту на будущее...Хотя это и не фоновое изображение... Но как именно "фокус" на заметочку возьму.
Спасибо.

gods33 · #43 (**permalink**) 11.12.2010, 00:59

Ребят, извините что морочил вам голову. Я тут просто посидел на досуге и прикинул: А нафига изобретать велосипед? Решил вобщем картинкой 3х3 пикселя заполнить область. Почитал форумы, статейки, посмотрел примеры... Но чего-то не получается. Вот мой... моё подобие на код

#top {
background-image: url('img/bg.gif');
background-repeat: repeat;
margin: 0;
height: 100px;
}

P.S. Я не быдлокодер, я только учусь... на него

рони · #44 (**permalink**) 11.12.2010, 03:07

Вmonolithed,
Фокусы Internet Explorer не показывает )))
Вариант фона под любое разрешение ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
<style type="text/css">
p {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    height: 50px;
    width: 300px;
    color: #FFFFFF;
    font-size:  2em;
}
* html p {
    position: absolute;
}
</style>
<script type="text/javascript">
var i = new Image,
    b;

function get(a) {
    var c = document,
        d = c.body,
        e = c.documentElement,
        f = "client" + a;
    a = "scroll" + a;
    return c.compatMode === "CSS1Compat" ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = fon;

function fon() {
    i.src = "http://imgs.su/tmp/1292024913.jpg";
    i.style.position = "absolute";
    i.style.left = "0px";
    i.style.top = "0px";
    i.style.width = get("Width") + "px";
    i.style.height = get("Height") + "px";
    i.style.zIndex = -999;
    i.id="img"
    document.body.appendChild(i)
}
window.onresize = function () {
   var i = document.getElementById("img");
   if(i) document.body.removeChild(i);
    window.clearTimeout(b);
    b = window.setTimeout(function () {
        fon()
    }, 20)
};
</script>
</head>
<body>
<p>Всякая всячина</p>
</body>
</html>

gods33 · #45 (**permalink**) 11.12.2010, 11:01

рони,
Спасибо огромное, это именно то, что нужно

Все работает так как хотел

x-yuri · #46 (**permalink**) 11.12.2010, 11:34

monolithed, эх...
просто надо дизайн делать в расчете на то, что он в браузере будет отображаться...
A Dao of Web Design

monolithed · #47 (**permalink**) 11.12.2010, 12:16

рони, x-yuri вчера не было возможности проверить в IE:

<style type="text/css">
table {width: 100%; height: 100%; position: absolute;}
td img {width: 100%; height: 100%;}
#wrap {overflow: hidden;}
#main {background: green; font: 35px/35px sens; margin: 0px auto; overflow: hidden; position: relative; text-align: center; width: 200px; height: 300px;}
</style>

<!--[if IE 6]>
<style type="text/css">
#wrap {text-align: center;}
</style>
<![endif]-->

<table>
    <tr>
        <td>
            <img src="http://www.alfabank.ru/f/1/retail/cards/standart/classic/Simple2.jpg" alt="" />
        </td>
    </tr>
</table>

<div id="wrap">
	<div id="main">text</div>
</div>

Плюс моего способа в том, что основной контейнер с текстовым содержимым расположен относительно, а не абсолютно!

x-yuri · #48 (**permalink**) 11.12.2010, 12:45

monolithed, я не про то. Я про то, что "придумали себе проблему и мужественно ее решаем"

gods33 · #49 (**permalink**) 11.12.2010, 12:51

Достиг желаемого! Огромное спасибо всем, кто откликнулся и протянул свою руку помощи.

ksa · #50 (**permalink**) 12.12.2010, 10:10

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

Решил вобщем картинкой 3х3 пикселя заполнить область.

Для этого достаточно е элемента, который будет заполняться таким фоном написать в цсс

background: url('url_картинки');

Форум

Справочник

Discord чат

Курсы javascript