Резиновый фон с картинкой

[FiRеFоX]

Всем привет
Вот ссылочка:
http://jsfiddle.net/2ftwf6kw/3/

Что смог - то сделал (не силён в верстке). Подскажите, как сделать, чтобы картинка была на всю ширину таблицы и при этом растягивалась и в высоту? Вобщем изменяла размеры, сохраняя свои пропорции.
Таблица неизвестной ширины.

 

[Volter9]

[member=FiRеFоX], так что ли?: http://jsfiddle.net/volter9/2ftwf6kw/4/

У тебя там на .back стоит max-width свойство. Я убрал max-width и добавил к свойству background-size: contain значение.

Если Вам надо что бы задний фон был во всю ширину, но что бы надписи были 100% но не больше 320 пикселей, то вот:

http://jsfiddle.net/volter9/2ftwf6kw/5/

 

[FiRеFоX]

[member=Volter9], А можно как-то сделать, чтобы изображение масштабировалось не только по горизонтали, но и по вертикали, а не было фиксированной высоты?

 

[Volter9]

Ну тогда так вот: http://jsfiddle.net/volter9/2ftwf6kw/6/

Я обратно поставил background-size: cover, теперь картинка масштабируется в обе стороны )

 

[FiRеFоX]

Ну тогда так вот: http://jsfiddle.net/volter9/2ftwf6kw/6/

Я обратно поставил background-size: cover, теперь картинка масштабируется в обе стороны )

Ясно, спасибо)

А вот ещё: http://jsfiddle.net/2ftwf6kw/9/
В каждом маленьком квадратике (слева и справа) будут определенные (разные) картинки (сообщение, в друзья, в игнор-лист и т.д).
1. Как выровнять изображения по центру этих квадратиков (вертикаль и горизонталь)?
2. Как сделать весь этот квадратик ссылкой и чтобы при наведении фон квадратика менял фон?

 

[Volter9]

Ну типа как то вот так: http://jsfiddle.net/volter9/2ftwf6kw/10/

Если иконка не квадратная (разница между шириной и высотой очень большая в общем), нужен будет другой способ.
А так все работает. Если убрать ссылку, картинка все равно будет там висеть в нужно месте. Отредактируйте значения высоты и ширины по собственному желанию.

Еще можно так: http://jsfiddle.net/volter9/2ftwf6kw/11/

Через свойства background-size и background-position.

P.S.: В следующий раз, кладите CSS в CSS вкладку пожалуйста. В HTML'e в style="" атрибуте не удобно редактировать и читать

 

[FiRеFоX]

[member=Volter9], Спасибо! Первый вариант как раз подходит