Форум PHP программистов > Резиновый бекграунд

Stasonix

3.10.2011 - 13:26

бекграунд для блока устанавливаю как обычно:


.test {
 background-image: url(../css/pad.png);
 background-repeat:no-repeat;
 background-position:center;
 }

но зажав Ctr и покрутив колесеко мыши в браузере замечаю такую картину как видно на фото, такого быть не должно, варианты есть как выкрутится?

m4a1fox

3.10.2011 - 13:32

Насколько я понимаю, то вы хотите сделать градиент?

Renden

3.10.2011 - 13:38

Stasonix
А

background-position:center center;

не пробывал...? мб сработает :)

Zerstoren

3.10.2011 - 13:44

Тут нужно пойти очень хитрым приемом.

Нужно положить в блок img с 100% высотой и ширной, а дальше играться с абсолютным позиционированием внутреннего элемента с текстом.

Это единый способ который я знаю, как можно сделать резиновый БГ для картинок.

Я его не делал, но видел реальный пример, когда БГ тянулся.

EvilDev

3.10.2011 - 14:03

Для начала пиши background:url() center center no-repeat
А терь подробнее, ничего ен понял.

_____________
HTML5, CSS3, jQuery, Node.js, PHP, Yii, Joomla, MySQL, MongoDb, GIMP

Zerstoren

3.10.2011 - 14:57

Автор хочет резиновый БГ.
Это я так понял

Stasonix

3.10.2011 - 16:17

Цитата (Zerstoren @ 3.10.2011 - 09:44)

Тут нужно пойти очень хитрым приемом.

Нужно положить в блок img с 100% высотой и ширной, а дальше играться с абсолютным позиционированием внутреннего элемента с текстом.

Это единый способ который я знаю, как можно сделать резиновый БГ для картинок.

Я его не делал, но видел реальный пример, когда БГ тянулся.

бекграунд всего документа я тоже видел как тянулся, на jquery есть плагин, хоть и ужасный, но что-то подобное и мне надо скорее всего, я вставил просто картинку в блок


<div> 
 <img src='#'>
 <div>MY TEXT HERE</div>
</div>

решил, только теперь текст еще бы не выпирал, резиновым не так уж и легко его сделать оказывается

sebastjan

4.10.2011 - 01:19

Ну ,не знаю.

Бредовая это идея делать резиновый бграунд, можно конечно в процентах картинку задать.
Но всё одно все последущие действия всё будут похабить.
К примеру уменьшая окно, фон в процентах будет тоже сужаться и при появлениии скрола, всё что ниже проокрутив будет без бонового бгфона который задан в процентах.
Можно на яваскрипт изголится - но к чему?
Броузер и без ява скрипт каждый раз будет неплохо загружать.
Как то уже писал что примерно 10 лет назад видел использование бгфона но частично, только шапка, картинку в 15 кб растянули в шапке, но понятно ,тогда инет был хилый и борьба за каждый килобайт была актуальна.
Ещё эти фишки с растяжками широко использовали с яваскрипт, эмитация увеличительного стекла, типа в онлайн ювелирном магазине по событию онклик или мышку навёл.
Так что моё мнение такая интерактивнаость -как самое оптимальное и визуально воспринимаемое --- это использование флеш.

Stasonix

4.10.2011 - 02:32

а если нету скролла и не предвидется, чем проценты плохи, все у меня нормально получилось, килобайты и сейчас правда актуальны до сих пор, есть такие с ИЕ6, мало, но есть, торомоззинг страшный.

sebastjan

5.10.2011 - 04:18

Цитата (Stasonix @ 3.10.2011 - 22:32)

а если нету скролла и не предвидется, чем проценты плохи, все у меня нормально получилось, килобайты и сейчас правда актуальны до сих пор, есть такие с ИЕ6, мало, но есть, торомоззинг страшный.

Про плохи проценты не говорил.
Как говорится всему своё место, если нашли для себя и своей идеи премлеммо ,значит всё хорошо.

ceil100

6.10.2011 - 21:43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/стили.css"/>
</head>

<body>
<img src="images/картинка.jpg" class="bg" />
<div class="container">
<div id="wrap">
<h1>Бла-бла-бла...</h1>
<p> </p>
<h2>Бла-бла...</h2>

<h3>Бла-бла</h3>

</div>
</div>
</body>
</html>


body {margin:0px;padding:30px 10px 10px 10px;}

img.bg {min-height: 100%;min-width: 1024px;width: 100%;height: auto;position: fixed;top: 0;left: 0;}

	@media screen and (max-width: 1024px){
			<span class="Array">img.bg {</span>left: 50%;margin-left: -512px; }
		}
div.container {position: relative; width: 1200px;margin: 5px auto;padding: 5px;}

#wrap {width:100%;height:100%;}

Только учтите, положение фона будет фиксированным,контент будет прокручиваться.
Картинка по размеру должна соответствовать min-width
Не работает в старых браузерах!

_____________
совокупление мозга других, не спасет от собственной умственной импотенции
чтобы получить правильный ответ, нужно задать правильный вопрос