:before et background-image... cela devrait-il fonctionner ?

Question

J'ai une div et j'applique :before et :after une image comme contenu. Cela fonctionne parfaitement. Il faudrait maintenant que j'applique une image d'arrière-plan pour qu'elle se répète comme l'image div redimensionne, mais cela ne semble pas fonctionner. L'image de fond est-elle sur :before et :after est censé travailler ?

Le code actuel :

HTML :

<div id="videos-part">test</div>

CSS :

#videos-part{
    background-color: #fff;
    height: 127px;
    width: 764px;
    margin: -6px 0 -1px 18px;
    position: relative;
}
#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
}

Answer 1

@michi ; définir height dans votre before pseudo classe

CSS :

#videos-part:before{
    width: 16px;
    content: " ";
    background-image: url(/img/border-left3.png);
    position: absolute;
    left: -16px;
    top: -6px;
    height:20px;
}

Answer 2

Images d'arrière-plan sur :before et :after devraient fonctionner. Si vous donnez un exemple, je pourrais probablement vous expliquer pourquoi cela ne fonctionne pas dans votre cas.

En voici un exemple : http://jsfiddle.net/namas/3/

Vous pouvez spécifier les dimensions de l'élément en % en utilisant background-size: 100% 100% (largeur / hauteur), par exemple.

Answer 3

 color: transparent; 

faites-moi des tours de passe-passe

#videos-part:before{
    font-size: 35px;
    line-height: 33px;
    width: 16px;
    color: transparent;
    content: 'AS YOU LIKE';
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik04LDE0TDQsNDloNDJsLTQtMzVIOHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik0zNCwxOWMwLTEuMjQxLDAtNi43NTksMC04ICBjMC00Ljk3MS00LjAyOS05LTktOXMtOSw0LjAyOS05LDljMCwxLjI0MSwwLDYuNzU5LDAsOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMzQiIGN5PSIxOSIgcj0iMiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMTkiIHI9IjIiLz48L3N2Zz4=');
    background-size: 25px;
    background-repeat: no-repeat;
    }

Answer 4

Vous pouvez définir une URL d'image pour l'accessoire de contenu au lieu de l'image d'arrière-plan.

content: url(/img/border-left3.png);

Cela ne résoudra pas tous les problèmes. Il faut tenir compte de la répétition, de la taille, de la position, etc. en utilisant d'autres propriétés.

Answer 5

Le problème avec les autres réponses est qu'elles utilisent position: absolute;

Cela rend difficile la mise en page de l'élément lui-même par rapport à l'image de marque. ::before pseudo-élément. Par exemple, si vous souhaitez afficher une image avant un lien comme ceci :

Voici comment j'ai réussi à obtenir la disposition présentée dans l'image :

a::before {
  content: "";
  float: left;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background: url(../../lhsMenu/images/internal_link.png) no-repeat 0 0;
  background-size: 80%;
}

Notez que cette méthode vous permet de mettre à l'échelle l'image d'arrière-plan et de conserver la possibilité d'utiliser les marges et l'espacement pour la mise en page.