0

When I come across websites that I really like, I often take a look at their page source just to see if I can learn any new web tricks. I came across TopTal's site, and when looking at how they import their main logo's <img/> tag (top + left of homepage), I was astonished to see:

<div class="page_header_top-logotype"> = $0
    <a class="logo is-big is-link for- " href="http://www.toptal.com"></a>
</div>

Ba-ba-bwhat?!?!

  • Where is the actual logo (an image or <img/> tag) pulled in?!?!
  • What in the world is that = $0?!?!

Am I missing something obvious, or is this some clever trick to pull an image in from some custom webfont/thing?

smeeb
  • 27,777
  • 57
  • 250
  • 447
  • 5
    It's called CSS, you can actually add background images to elements in it ! – adeneo Dec 18 '15 at 20:06
  • Thanks @adeneo (+1) - does this trick have a name inside CSS-land? if you could explain it and give a link to a tutorial that covers this trick, I'll happily give you the green check! – smeeb Dec 18 '15 at 20:08
  • Why the downvote? This shows effort/research, is on topic, isn't a dupe and is an [SSCCE](http://sscce.org). Unhand me you fiend! – smeeb Dec 18 '15 at 20:09
  • 1
    Pretty basic CSS http://www.w3schools.com/css/css_background.asp – Nikki9696 Dec 18 '15 at 20:09
  • You look at the source, find the included CSS, problem solved... – nicael Dec 18 '15 at 20:10
  • Thanks so much @Nikki9696 - however your link doesn't explain what the `= $0` is. Perhaps any thoughts? – smeeb Dec 18 '15 at 20:11
  • 1
    More interesting, what does
    = $0 mean. The other part is just using a background in css (http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image?rq=1)
     – Ernesto Dec 18 '15 at 20:11
  • I checked the source and do not see a $0 in chrome. What browser are you using? Unless script or CSS is doing fun things with siblings or next child, it's just plain text. – Nikki9696 Dec 18 '15 at 20:12
  • @smeeb "= $0" is just plain text (content). Doesn't mean anything in general. Might mean something specific for that particular web page's content. Odds are it's just badly entered dummy text to make some CMS field happy. – DA. Dec 18 '15 at 20:13
  • The = $0 might have just been text from an estimate, like a dollar amount that is displayed as plain text. – Nikki9696 Dec 18 '15 at 20:13
  • I didn't see it either, not sure where did the OP find it. – Ernesto Dec 18 '15 at 20:13
  • I've checked the source, and the console, and can't find `= $0` anywhere either ? – adeneo Dec 18 '15 at 20:13
  • And to be clear, that's not in any way part of the HTML. It's just text that happens to be surrounded by HTML. – DA. Dec 18 '15 at 20:14
  • The mistery of the zero dollars in toptal. – Ernesto Dec 18 '15 at 20:14
  • So when/why would someone use these 'CSS Backgrounds'? Are they more efficient for the browser? – smeeb Dec 18 '15 at 20:15
  • 1
    In any case, it's just content in a div based off the OP, and has no meaning. – Nikki9696 Dec 18 '15 at 20:15
  • http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image?rq=1 here a difference between techniques – Ernesto Dec 18 '15 at 20:16
  • Because it's easier to change css classes than html source, especially for larger sites with content management systems, frameworks, CSS pre-processors, and other stuff. Especially once media types and responsive design happens. – Nikki9696 Dec 18 '15 at 20:16
  • This isn't a trick, this is just very basic CSS. Normally you don't want to use an `` tag for images that are not intended to be main contents. Almost every site does this, including StackOverflow. – Derek 朕會功夫 Dec 18 '15 at 20:35
  • How is this possibly a dupe?!?! When I asked the question, I didnt even know what CSS backgrounds were!!!! Lemmings!!! All of you, lemmmmminngggsss – smeeb Dec 18 '15 at 20:54

2 Answers2

3

It's not a trick, it's just basic styling with CSS

<a class="logo is-big is-link for- " href="http://www.toptal.com"></a>

<style type="css/text"> // or in a .css file
    .logo.is-big {background-image : url("someimage.jpg")}
</style>
adeneo
  • 312,895
  • 29
  • 395
  • 388
3

Like the commenters said, the logo is set via CSS, specifically... this rule.

.logo.is-link {
    transition-duration: 200ms;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: transform, opacity;
    display: inline-block;
    opacity: 0.9;
}
.logo.is-big {
    width: 105px;
    height: 35px;
    background-image: url("//assets.toptal.io/assets/public/blocks/logo/big-21c32f3cb60e0b8cf3c514a8fc5fd905.png");
    background-size: 105px 35px;
    background-repeat: no-repeat;
}

The first class applies display: inline-block; which lets you set the dimensions and the second class sets up the actual background image that TopTal uses.

Please see this StackOverflow discussion for more information about when to use img vs when to use css background-image.

Community
  • 1
  • 1
Marie
  • 2,114
  • 1
  • 17
  • 31