Фон в комментариях к отдельной записи

[UDFj]

My Precious Muse
Thank You

«Фон странички комментариев к этой записи мог быть особенным», -
думаете вы.

Что же... Будет )

Загляните в комментарии к этой записи и вы всё увидите сами.
Ах да, кажется в комментариях к - примеру - о фонах на разных страничках я несколько поторопилась с выводами.

NB! Следуйте неотступно "букве" кода.

-- I --

♔ Создаём новый пост с одной единственной картинкой. Именно с неё вы начинаете свою запись. После неё в посте может быть всё что угодно.
♔ Картинку лучше всего большого разрешения, скажем не меньше 1920px × 1200px, как в этом посте. Можно больше. Только не забывайте о весе в Мб. Смотрите сами, с мониторов какого размера заглянувших к вам на дневничок вы рассчитываете произвести впечатление.
♔ Да, из основной ленты вы видите её масштабированной, что реализовано в CSS-коде к моему дневничку.
♔ Ко всей красивости и приятности, вы выигрываете в качестве изображения в фоне, не добавляя его в БИ, самым беспощадным образом ограничивающей ваш полёт фантазии до 231кб. Стандартный код для вставки изображения в запись с центрированием в блоке поста:

<div align="center"><img src="http://www.theamazingpics.com/wp-content/uploads/2013/06/Awesome-Shot-of-Sunset-Above-The-Clouds.jpg"></div>

-- II --

♔ Добавляем в CSS-код две строчки:

#JournalComments #post_____________ .postContent .commentAuthor {display: none; }
 #JournalComments #post_____________ .postContent img {z-index: -1 !important; display: block; position: fixed; min-width: 100% !important; width: 100%; top: 0; left: 0; pacity: 1 !important; } 

♔ Ингридиенты:

#JournalComments #post________ .postContent img — селектор картинки для странички комментариев к конкретному посту.

NB! вместо ____________ без пробела вписываем номер поста отсюда
- ССЫЛКА на пост -
с разъяснением, так как нельзя в этот пост ещё одну картинку добавлять.

#JournalComments #post_____________ .commentAuthor{display: none; } — эта строчка кода решает проблему расползающейся картинки аватара в посте отключением блока с аватаркой и подписью.

z-index: -1 !important; — помещает увеличенную картинку под враппер, но перед основным фоном.

display: block; — "отрывает" картинку от записи.

position: fixed;— фиксирует картинку на странице.

min-width: 100% !important; — то есть, картинка растянется до своей первоначальной ширины, нижняя часть полотна при несоответствии соотношения сторон скроется под окном браузера, к тому же, картинка будет автоматически масштабироваться при изменении размеров окошка.

width: 100%; — почти то же, что и выше, только чтобы уж наверняка,

top: 0; left: 0; — для позиционирования картинки от верхнего левого угла окошка браузера.

♔ Есть "но":

При процентном задании обоих ширин нужно, чтобы картинка или была равна или превышала размеры окошка браузера. То есть потери качества фонового изображения при этом не приключится. Сравните, -- это страничка комментариев -- , а -- вот это -- - оригинальное фоновое изображение. Само собой, можно и 130% задавать, если картинка меньше "окошкиных" размеров. Вы ведь понимаете, изображение на картинке немножко расплывётся.

Ещё немножко волшебства... )

запись создана: 01.03.2014 в 01:02

@темы: CSS, CSS-примеры

Comments

[смольник]

Чудесно и волшебно. Утащу в "рецепты"

[UDFj]

Лучше обновлённый.

[UDFj]

Пост обновила. Меняй. Этот ценнее.

[смольник]

Хорошо, милпя. Вот залез проверить, что тут и как.

[UDFj]

Оу, да,.. добавлю дополнения в запись по фонам на разных страничках... Загляну-ка к тебе в код. Не обращай внимания, мысли вслух о наведении красоты в записях.

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

[смольник]

С праздником, милая. Счастья тебе, любви и тепла, радости и творческих свершений)
Насчет диза, не знаю, могу кинуть клич)

[UDFj]

Малыш,.. благодарю за тёплые пожелания.

Насчет диза, не знаю, могу кинуть клич)

Давай.

[смольник]

Окей, я сейчас брошу объяву, хорошая)