background... как растянуть картинку

Тема в разделе "Другие языки", создана пользователем Ardis, 12 ноя 2009.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. Ardis

    Ardis

    Регистр.:
    26 мар 2008
    Сообщения:
    196
    Симпатии:
    40
    Доброго времяни суток!
    Подскажите, плз, как сделать, чтобы фон (в виде графического файла fon.jpg) растягивался в окне браузера?!
    поиск ни че не дал... я удивлен что сss такое не может оО

    repeat - картинка бесконечно повторяется по горизонтали и вертикали, заполняя собой все фоновое пространство браузера;

    repeat-x - картинка повторяется по горизонтали;

    repeat-y - картинка повторяется по вертикали;

    no-repeat - картинка не повторяется.....

    А растянуть нет....
    как быть?:confused:
     
  2. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    В css3 это делается довольно просто, а пока он полностью не поддерживается, приходится извращаться:
    HTML:
    
    <html>
        <head>
    	<style type="text/css">
    		html {height:100%;}
    		body {height:100%; margin:0; padding:0;}
    		#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
    		#page {position:relative; z-index:1;}
    	</style>
            <!-- По традиции, для говнобраузера свое: -->
    	<!--[if lte IE 6]>
    	<style type="text/css">
    		html {overflow-y:hidden;}
    		body {overflow-y:auto;}
    		#bg {position:absolute; z-index:-1;}
    		#page {position:static;}
    	</style>
    	<![endif]-->
        </head>
        <body>
            <div id="bg"><img src="fon.jpg" width="100%" height="100%" alt="" /></div>
            <div id="page">
                <!-- Здесь — вся остальная часть страницы -->
            </div>
        </body>
    </html>
    
    Т.е., фон в css растягивать нельзя, зато можно растягивать элемент img. Вот этим и пользуемся.
    P.S.: Вашей теме место в форуме "Веб-дизайн".
     
  3. Ardis

    Ardis

    Регистр.:
    26 мар 2008
    Сообщения:
    196
    Симпатии:
    40
    Сяп, работает, но 1 не радует одно то что если страница не вмещается в дисплее по вертикали (т.е. прокручивается) то и фон прокручивается... нельзя сделать что бы фон растягивался на всю именно страницу а не на дисплей. надеюсь понятно объянил :)
    да кстати что т осразу не сообразил... но и тут вроде норм...
    :D
     
  4. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Честно-говоря, вряд-ли. Нету времени сейчас особо пробовать, но, по крайней мере без javascript, которым при каждой загрузке узнавать высоту окна, вряд-ли.
     
  5. RolCom

    RolCom

    Регистр.:
    12 мар 2008
    Сообщения:
    351
    Симпатии:
    108
    Это ппц будет... Сравни, разрешения 1024 и 2000, искажение картинки, растягивается по ширине больше, чем в два раза. Т.е. при увеличении разрешения ширина растет, а высота наоборот уменьшается, искажение все сильней. Я уже не говорю, если на страницах различное колличество текста, высота может скакать от 800 до 5000 и более.
     
  6. Eihwaz

    Eihwaz

    Регистр.:
    7 окт 2007
    Сообщения:
    156
    Симпатии:
    54
    Да не, если фон более-однородный, (градиент какой-нибудь хитрый, например, который нельзя сделать, просто указав фон страницы в css), то выглядеть будет сносно, но вообще я хотел сказать то же самое: оно нафиг не надо. А если надо обязательно, то все-таки нужно рыть javascript.
     
  7. Ardis

    Ardis

    Регистр.:
    26 мар 2008
    Сообщения:
    196
    Симпатии:
    40
    Картинка смотрится в любом разрешении нормально
    я не знаю javascript...:confused:

    по ходу принется резать картинуку
     
  8. Ardis

    Ardis

    Регистр.:
    26 мар 2008
    Сообщения:
    196
    Симпатии:
    40
    а реально растянуть картинку по всей ячейке в таблице?
     
  9. nemoi

    nemoi Создатель

    Регистр.:
    23 авг 2008
    Сообщения:
    25
    Симпатии:
    0
    ...пошамань с масштабом картинки...
     
  10. n1ce

    n1ce Писатель

    Заблокирован
    Регистр.:
    19 дек 2009
    Сообщения:
    7
    Симпатии:
    0
    изучаем css, после этого все станет возможен в напровлении html+css :)
     
Статус темы:
Закрыта.