background при помощи after & before

[mrfrunze]

Добрый день, подскажите как задать background  для классов  first, second через after и before -  чтоб отображался по ширине на весь экран.
Сейчас отображается background только внутри элемента. http://jsfiddle.net/mrfrunze/krkbdruu/2/

Допустима ли такая запись:

<section class="content">	<div class="container">		<section class="first">		</section>		<section class="second">		</section>	</div></section>

<section class="first">  внутри   <div class="container">  ? Спасибо..

[prophet_07]

не проще сделать .first и .second обвертками, а внутри .container ?

<section class="content">

        <section class="first">

             <div class="container"></div>
        </section>
        <section class="second">

             <div class="container"></div>
        </section>
</section>

[mrfrunze]

не проще сделать .first и .second обвертками, а внутри .container ?

<section class="content">

        <section class="first">

             <div class="container"></div>

        </section>

        <section class="second">

             <div class="container"></div>

        </section>

</section>

Все оказалось банально ))) заработался, иногда можешь решить сложные вещи, а на простых зацикливаешься !! Спасибо.

Но все же можно ли задавать background   через after и before ? Спасибо 

prophet_07

[IIIIIIIIII]

Но все же можно ли задавать background   через after и before ? Спасибо 

Не то что можно а нужно
Использование автоматических внешних полосок {margin: 0 auto} везде и всюду не зачем, если есть псевдоэлементы. 
Это позволит избежать лишней вложенности и сделать код более универсальным.
http://jsfiddle.net/krkbdruu/3/embedded/result/
http://jsfiddle.net/krkbdruu/3/

[mrfrunze]

 

Но все же можно ли задавать background   через after и before ? Спасибо 

Не то что можно а нужно

Использование автоматических внешних полосок {margin: 0 auto} везде и всюду не зачем, если есть псевдоэлементы. 

Это позволит избежать лишней вложенности и сделать код более универсальным.

http://jsfiddle.net/krkbdruu/3/embedded/result/

http://jsfiddle.net/krkbdruu/3/

 

Спасибо, просто и лаконично, ))) спасибо за подсказку!!!

[IIIIIIIIII]

спасибо за подсказку!!!

Незачто. Главное не прописывайте top: 0; 

[mrfrunze]

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