CSS :before repeat issue - css

Question

I set :before property on my footer but I'm facing a repeating issue. I mean my image from :before property is repeated a lot of and I don't know why :/
See on my website it will be easier to understand :)
http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php
Here is my code
/*Insertion image TDB footer*/
div.footer-container ::before{
ontent:url("../img/Tonnerre/img_tdb_footer.png");
}
/*Fin insertion image*/
<div class="footer-container">
<footer id="footer" class="container" data-nb-cols="6">
<div class="container">
<!-- Block Newsletter module-->
<section id="newsletter_block_left">
<h4>Lettre d'informations</h4>
<div class="block_content">
<form action="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php" method="post">
<div class="form-group">
<input class="inputNew form-control newsletter-input placeholder" placeholder="Saisissez votre adresse e-mail" id="newsletter-input" type="text" name="email" size="18" value="">
<button type="submit" name="submitNewsletter" class="btn btn-default button button-small">
<span>ok</span>
</button>
<input type="hidden" name="action" value="0">
</div>
</form>
</div>
</section>
<!-- /Block Newsletter module-->
<section id="social_block" class="footer-block">
<h4 class="title_block">Nous suivre</h4>
<ul class="toggle-footer" style="">
<li class="facebook"><a class="_blank" href="https://www.facebook.com/tonnerredebelt/?fref=ts" target="_blank">Facebook</a></li>
</ul>
</section>
<!-- Block categories module -->
<section class="blockcategories_footer footer-block col-xs-12 col-sm-2">
<h4>Catégories</h4>
<div class="category_footer toggle-footer" style="">
<div class="list">
<ul class="tree dynamized" style="display: block;">
<li class="last">
<span class="grower CLOSE"> </span><a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=8&controller=category&id_lang=1" title="">
Produits
</a>
<ul style="display: none;">
<li>
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=10&controller=category&id_lang=1" title="Ceintures en cuir, noires, Bicolores, fantaisistes… Retrouvez tout l'univers de la marque celio* à travers sa E-boutique.">
Boucles
</a>
</li>
<li>
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=9&controller=category&id_lang=1" title="LIVRAISON &amp; RETOUR GRATUITS◅ Retrouvez les ceintures homme en ligne | Grand choix parmi plus de 1 500 marques sur...">
Bracelets
</a>
</li>
<li class="last">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_category=7&controller=category&id_lang=1" title="Ceintures : profitez de toutes nos offres du catalogue ceintures sur Galerieslafayette.com. N'hésitez pas vos achats sont satisfaits ou remboursés pendant 30 ...">
Ceintures
</a>
</li>
</ul>
</li>
</ul>
</div>
</div> <!-- .category_footer -->
</section>
<!-- /Block categories module -->
<!-- MODULE Block footer -->
<section class="footer-block col-xs-12 col-sm-2" id="block_various_links_footer">
<h4>Informations</h4>
<ul class="toggle-footer" style="">
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=prices-drop" title="Promotions">
Promotions
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=new-products" title="Nouveaux produits">
Nouveaux produits
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=best-sales" title="Meilleures ventes">
Meilleures ventes
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=contact" title="Contactez-nous">
Contactez-nous
</a>
</li>
<li class="item">
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?id_cms=3&controller=cms&id_lang=1" title="Conditions d'utilisation">
Conditions d'utilisation
</a>
</li>
<li>
<a href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/index.php?controller=sitemap" title="sitemap">
sitemap
</a>
</li>
<li>
© 2014 <a class="_blank" href="http://www.prestashop.com" target="_blank">Logiciel e-commerce par PrestaShop™</a>
</li>
</ul>
</section>
<!-- /MODULE Block footer -->
<!-- Block myaccount module -->
<section class="footer-block col-xs-12 col-sm-4">
<h4>Mon compte</h4>
<div class="block_content toggle-footer" style="">
<ul class="bullet">
<li>Mes commandes</li>
<li>Mes avoirs</li>
<li>Mes adresses</li>
<li>Mes informations personnelles</li>
</ul>
</div>
</section>
<!-- /Block myaccount module -->
<!-- MODULE Block contact infos -->
<section id="block_contact_infos" class="footer-block col-xs-12 col-sm-4">
<div>
<h4>Informations sur votre boutique</h4>
<ul class="toggle-footer" style="">
<li>My Company, 42 avenue des Champs Elysées
75000 Paris
France </li>
<li>
<span>0123-456-789</span>
</li>
<li>
<span>sales#yourcompany.com</span>
</li>
</ul>
</div>
</section>
<!-- /MODULE Block contact infos -->
<div id="block_facebook_like" class="block jq_slide_toggle">
<h4>Facebook</h4>
<div class="facebook-fanbox">
<div class="fb-like-box fb_iframe_widget" data-href="https://www.facebook.com/tonnerredebelt/?fref=ts" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false" data-width="292" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=334341610034299&color_scheme=light&container_width=288&header=false&href=https%3A%2F%2Fwww.facebook.com%2Ftonnerredebelt%2F%3Ffref%3Dts&locale=en_US&sdk=joey&show_border=false&show_faces=true&stream=false&width=292"><span style="vertical-align: bottom; width: 292px; height: 214px;"><iframe name="f1cfcf364c" width="292px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/plugins/like_box.php?app_id=334341610034299&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df251877a6%26domain%3Diutdoua-webetu.univ-lyon1.fr%26origin%3Dhttp%253A%252F%252Fiutdoua-webetu.univ-lyon1.fr%252Ff3e4cbbb3%26relation%3Dparent.parent&color_scheme=light&container_width=288&header=false&href=https%3A%2F%2Fwww.facebook.com%2Ftonnerredebelt%2F%3Ffref%3Dts&locale=en_US&sdk=joey&show_border=false&show_faces=true&stream=false&width=292" class="" style="border: none; visibility: visible; width: 292px; height: 214px;"></iframe></span></div>
</div>
</div>
<!-- MODULE Block reinsurance -->
<div id="reinsurance_block" class="clearfix">
<ul class="width5">
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-2-1.jpg" alt="Échange en magasin"> <span>Échange en magasin</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-3-1.jpg" alt="Paiement à l'expédition."> <span>Paiement à l'expédition.</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-4-1.jpg" alt="Livraison gratuite"> <span>Livraison gratuite</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/reinsurance-5-1.jpg" alt="Paiement 100% sécurisé"> <span>Paiement 100% sécurisé</span></li>
<li><img src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/modules/blockreinsurance/img/" alt="Satisfait ou remboursé"> <span>Satisfait ou remboursé</span></li>
</ul>
</div>
<!-- /MODULE Block reinsurance -->
<a id="logo_footer" href="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/" title="Tonnerre De Belt">
<img class="logo" src="http://iutdoua-webetu.univ-lyon1.fr/~p0902398/prestashop/img/tonnerre-de-belt-logo-1447323498.jpg" alt="Tonnerre De Belt" width="1681">
</a>
</div>
</footer>
</div>
Thanks for helping :)
Alexis

Answer 1

The problem may be in your selector. You are doing this way in your site:
.footer-container *::before
{
content:url("../img/Tonnerre/img_tdb_footer.png");
}
See that * in your selector? It means that you want all child elements of .footer-container to have that css applied. You probably don't want it to work like this, I think.
Maybe you can try .footer-container::before to apply just before the elements that contains the .footer-container class, which is just one element.

Answer 2

You should do a background-image and background-repeat properties in your footer
.footer-container ::before {
content: " ";
background-image: url("../../img/Tonnerre/img_tdb_footer.png");
background-repeat: no-repeat;
}

Answer 3

Do not forget to add height and width to your element in before:
.footer-container ::before {
content: " ";
background: url("../../img/Tonnerre/img_tdb_footer.png") no-repeat;
height:100px;
width:100px;
background-size:100%;
}