élément composé de trois background

Bonjour à tous.

j'ai un souci sur lequel je bute, ou plus précisément qui demande une optimisation.

J'ai un barre qui reviens plusieurs fois sur chaque page.

Chaque barre est composé d'
une barre de surlignement de couleur
une barre avec des info
une barre de souslignement de couleur

Aujourd'hui j'ai fait le code suivant.

<div class="barre_couleur"></div>
<div class="barre-rea"></div>
<div class="barre_couleur2"></div>

<div class="barre_couleur2"></div>
<div class="barre-rea"></div>
<div class="barre_couleur2"></div>

<div class="barre_couleur2"></div>
<div class="barre-rea"></div>
<div class="barre_couleur"></div>

.barre_couleur, .barre_couleur2{
	clear: both;
	background: url(../img/new/barre-couleur.png);
	height:15px;
}
.barre_couleur2{
	height:4px;
}
.barre-rea{
	background-image:url('../img/rea.gif');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	display: inline-block;
	width: 100%;
	height: 52px
}

Cela fonctionne super bien, mais le souci est que ca rajoute beaucoup d'élément dans les DOM.
J'ai beau réfléchir de mille facon mais je vois pas comment.
Auriez vous une idée?

bonsoir,

il y a les background multiple qui te permettent de mettre plusieurs images/gradient et une couleur en fond d'un seul élément.

il ya les pseudo elements, ::before et ::after.

il y a aussi border-images.

Ces moyen CSS fonctionnent bien dans les navigateurs récents.

exemples : http://codepen.io/gc-nomade/pen/xbtop

<edit> un gradient ou une image sont la même choses pour les fonds , excepté qu'il faut utilisé background-size pour donner une taille au gradient sinon il s'etalent sur la surface occupé par l'element.</edit>
Modifié par gc-nomade (30 Oct 2014 - 20:54)

MILLE MERCI!

Le border image est top:

<header>
  <div class="barre-rea"></div>
</header>
<div>
  [...]
  <div class="barre-rea"></div>
  [...]
  <div class="barre-rea"></div>
  [...]
<div>
<footer>
  <div class="barre-rea"></div>
</footer>

.barre-rea{
	clear: both;
	background-image:url('../img/rea.gif');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	display: inline-block;
	width: 100%;
	height: 52px;
	border-style: solid; 
  	border-width: 4px 0px 4px; 
  	border-image: url(../img/new/barre-couleur.png) 4 0 4  repeat;
}
header .barre-rea{
 	border-width: 15px 0px 4px; 
  	border-image: url(../img/new/barre-couleur.png) 15 0 4  repeat;
}

footer .barre-rea{
 	border-width: 4px 0px 15px; 
  	border-image: url(../img/new/barre-couleur.png) 4 0 15  repeat;
}

D'un point de vue semantique, sachant que <div class="barre-rea"></div> n'est qu"une image avec de l'information. Il y aurait t il une balise plus adapté?

gotcha5832 a écrit :

D'un point de vue semantique, sachant que &lt;div class=&quot;barre-rea&quot;&gt;&lt;/div&gt; n'est qu&quot;une image avec de l'information. Il y aurait t il une balise plus adapté?

Si tu as opté pour border-image, tu peut utiliser une image avec un alt bien renseigner pour que ton information soit presente. Reste a voir ce que tu attend en visuel de ton image vu le background-size:contain appliqué au div (un width:xx%; , un display:block et margin:auto , ... ?)