My Precious Muse
Thank You

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

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


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

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


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



-- II --

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



♔ Ингридиенты:
  • #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% задавать, если картинка меньше "окошкиных" размеров. Вы ведь понимаете, изображение на картинке немножко расплывётся.

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