фонофое изображение

[maa]

добрый день.

Фоновое изображение по ширине должен растягиваться на 100% ширины окна браузера(по высоте – пропорционально растяжению по ширине). Центр фонового изображения должен оставаться на одной и той же высоте. Таким образом, при большой ширине окна браузера верх изображения должен «срезаться» верхним меню; низ – белым градиентом; пропорции должны оставаться неизменными.

можно ли как-то закрепить центр изображения? оО можно ли как-то обрезать изображение (вложенное в блок тегом img)?

[maa]

ребята, совсем нет никаких предположений, как сие сделать?

Edited November 24, 2011 by maa

[Softlink]

ребята, совсем нет никаких предположений, как сие сделать?

Нарисуйте, как должно быть. И там со всякими стрелочками, что куда тянется и как обрезается. Шансов услышать предположение или решение будет больше.

[nightgremlin]

Не совсем понятно что вы просите.

оО можно ли как-то обрезать изображение (вложенное в блок тегом img)?

Проще вставить ещё один блок со свойством background

Например:

.block {
display:block;
background:url(путь к вашему файлу изображения) no-repeat;
width: ???; /* ширина блока */
height: ??? /* высота блока */
}

Задав меньшую ширину и высоту блока изображения, чем размер изображения. Картинка по идее должна обрезаться.

А позицию изображения можно задать свойством background-position или поставив значения позиции в конце свойства background. Например:

background:url(путь к вашему файлу изображения) no-repeat center right;

можно ли как-то закрепить центр изображения?

Постараюсь ответить на этот вопрос.

Попробуйте воспользоваться свойством background-size. Примерно вот так:

body {
background:url(путь к вашему файлу изображения) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}

P.s. Я могу ошибаться, так что не судите строго

Edited November 25, 2011 by nightgremlin

[maa]

.car{

background-image: url(img/body_car.jpg);

background-repeat: no-repeat;

background-position: center;

width: 100%;

height: 750px;

min-width: 1200px;

z-index: -3;

border: 1px solid red;

}

изображение не растягивается. есть мнение, что таким образом (через background) растянуть не получится.

можно сделать через вставку тегом img, задать ему ширину 100%. картинка будет растягиваться в ширину блока(=браузера), НО её высота пропорционально увеличится и картинка вылезет из блока внизу. а это как раз и является одной из задач, чтобы не дать ей вылезти (!!нельзя применять скрипты и canvas!! только html+css).

ну и вторая задача, которую я, видимо,невнятно описал сперва :

- ДОПУСТИМ, центром изображения является значок на капоте. так вот нужно сделать так, чтобы при масштабировании центр=значок оставался на месте, а картинка ползла вширь и ввысь. плюс к этому блок картинки не должен тянуться, а изображение ползти(скрываться) под тёмную полосу вверху и белую полосу внизу блока(здесь она не нарисована ещё).

нечто похожее реализовано на http://planeta-kino.com.ua. +/- масштаб - главная картинка стоит.

Edited November 25, 2011 by maa

[nightgremlin]

Вы такой вариант пробовали?

.car{
background: url(img/body_car.jpg) no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 750px;
min-width: 1200px;
z-index: -3;
border: 1px solid red;
}

Edited November 28, 2011 by nightgremlin

[maa]

решил вот так:

сделал блок .car в него вложил изображение и css

.car{

position: absolute;

top: 0px;

width: 100%;

height: 750px;

min-width: 1200px;

z-index: -3;

overflow: hidden;

}

.car img{

width: 100%;

}

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

как сделать, чтоб закрепить центр, а "росло" оно в бока и верх-низ?