Question

i have a question of HTML anchor 's background picture , please see this :

enter image description here

when i debug this website in firefox , i can see this anchor 's code is

<div class="page">
    <div class="page__canvas">
        <div class="header-logo-account">
            <div class = "container">
                <div class = "header-logo-account__container">
                    <a class="header-logo-account__logo" href="http://envatomarketplaces.com/">
                        <span>Envato Marketplaces</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

where the responsible CSS define is

.page {
    min-width: 984px;            
}
.page__canvas {
    position: relative;
    z-index: 2;
    min-height: 100%;
    background-color: yellow;

}
.header-logo-account {
    background-color: #232323;
    height: 48px;
    position: relative;
}

.container {
    margin: 0px auto;
    width: 984px;
}

.header-logo-account__container {
    position: relative;

}
.header-logo-account__logo {
    position: absolute;
    height: 48px;
}

what i can not understand is : the css define have not any background picture set , but in the result , obviously anchor is fixed with a picture . when i run above code in my local machine , the final result is :

enter image description here

my result is quite different with the original one ,why?

now i guess maybe it is because some js script when page load , but i am not sure , even my guess is right , i can not find out which js file do this , can anybody help me to solve it ?

No correct solution

OTHER TIPS

The background image is set to the span within the anchor and not on the actual anchor

Taken from their css file:

.svg .header-logo-account__logo>span {
background: url(http://2.envato-static.com/assets/logos/envato_marketplaces-e40d7704e9b725cd1e541878ccdb45b0.svg);
background-size: 192px 16px;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top