Наложение слоя - оптимальный адаптивный вариант

[dron]

Добрый день!

 

По задумке, в шапке должен быль логотип, наложенный на горизонтальную черту, проходящую по всему экрану.

Вопрос, как это лучше всего реализовать, для адаптивной верстки? Черта фоном? или <hr> или border, а сверху лого?

 

Прошу помощи. Возможно, кто-то делал такое?

 

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

[abrahadabra]

да конечно блок с border-top, в нём лого с отрицательным margin-top.

[Нарек]

Можно с псевдоэлементами.

[dron]

Спасибо за советы!

 

Можно с псевдоэлементами.

Об этом можно подробнее?

[Нарек]

Об этом можно подробнее?

 

https://jsfiddle.net/Narek_T/kwnaag8y/

[dron]

Ууух, даже с кодом!!! Спасибо огромное!!! Как я понял, этот вариант предпочтительней )

[Нарек]

Ну не факт.

[abrahadabra]

На самом деле чем проще, тем лучше.

Edited December 21, 2015 by abrahadabra

[Нарек]

Ну да, единственный минус, что если родительский блок или body будут иметь в background-е картинку или градиент - работать не будет.

[abrahadabra]

почему?

[Нарек]

Ну у самого лого background то белый.

[abrahadabra]

а, так речь о случае, когда прозрачным должно быть? В этом случае да, придётся извратиться.

[dron]

Я вчера все варианты попробовал ))) Не хотелось для лого указывать жесткие размеры. Чутка поправил, все получилось. Спасибо Вам всем огромное!!