Как лучше вставить картинку — background или через img?

Question

[Aljo]

Здравствуйте!

Возник небольшой спор со вторым верстальщиком по поводу вставки картинки в баннер страницы.
Вот такой шаблон у баннера, который есть практически на каждой странице. Меняться будет лишь картинка слева и текст баннера.


Но по дизайну на маленьких разрешениях, эта картинка будет сверху и уже прямоугольная (не обрезается), а однотонный фон под ней. Грубо говоря так:


Поэтому вопрос:
Как это лучше реализовать? Или как бы вы это сделали?

Заранее спасибо!

Comments

[ambisinister One]

и чем сложно фон из двух цветов на искосок сделать?

[Aljo]

ambisinister, извиняюсь, я где-то спросил, как сделать фон из двух цветов?

[ambisinister One]

body{background:linear-gradient(to top left,darkseagreen 50%, teal 50%);}

[Aljo]

ambisinister, я прекрасно знаю как это сделать, спасибо. Только вот вопрос совсем в другом. как ЛУЧШЕ сделать - картинкой или фоном? Тем более слева у меня не градиент, а картинка мальчика с подзорной трубой, справа - однотонный фон.

[ambisinister One]

Aljo, я не хочу умничать, но просто на минуту голову включите!

[Aljo]

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

[Ankhena]

Картинки бывают смысловые (контентные) и украшения.

- Эта картинка несет какой-то смысл?
- Нет.

Значит, это либо фон либо img с aria-hidden true, чтобы читалки не стали пытаться рассказывать о ней.

Лично я не люблю лишние элементы в разметке и предпочитаю первый вариант.

Если приводится аргумент, что "ай, бэк не может менять стили".
Ага.
Но зато бэк может менять кастомные свойства родительского блока.
А если и это не умеет... надо научить.

Answer 1

[Михаил]

Я бы сделал как background-image
Думаю что это проще в верстке, и сопровождении: вот есть некий элемент оформления сайта (который можно вынести в отдельный banner.css и подключить куда нужно), вот есть текст. То что вы хотите на небольших экранах через CSS, насколько я понимаю, вполне реализуется. Так зачем добавлять лишние теги, если можно без них?