CSS Url property on sites?

Question

I like to sometimes try to "reverse engineer" websites, particularly ones that look complex. I feel in doing so it will help me learn techniques that other developers use.

I recently wanted to look at the league of legends website. The first thing I tried was to see how they placed their site's head/nav image. I use firefox so I used the "right-click -> inspect" function. In doing so I found this

<html>..........
<body class="not-front not-logged-in page-node node-type-lc-article no-sidebars i18n-en pvpnetbar">
    <style> … </style>
        <div id="lol-header" class="i18n-en" role="banner">
            <div class="section clearfix">
                <div id="lol-header-sitename">
                    <a id="site-name" class="hidden-text" alt="Home" rel="home" title="Home" href="http://na.leagueoflegends.com/"> … </a>
                </div>
......</html>

the div that has a CSS Url property is 'lol-header' and it's value is

url("../img/lol-header-sprite.png")

I know that anytime you see two dots before a forward slash that it means you go to the parent directory. Now, I can see if the url was "http://na.leagueoflegends.com/learn/new_user_guide' then the relative url should be http://na.leagueoflegends.com/img/lol-header-sprite.png" ...but this doesn't work. Also, if you are on the main page it has the same relative URL.

How can that be? I thought I knew a good amount about web coding, but I'm kind of lost :-\

j08691 · Accepted Answer · 2013-06-13 16:20:28Z

4

The page you're referring to loads the CSS files like this:

@import url('/sites/default/files/lol_global_elements/css/lol_global_elements.css');

The CSS rule itself is:

background: transparent url(../img/lol-header-sprite.png) 50% 0px no-repeat;

The ../ means go up one level, relative to the path the file was loaded from. So taking the first URL, it would begin with:

http://na.leagueoflegends.com/sites/default/files/lol_global_elements/

Then it adds img/lol-header-sprite.png to give you:

http://na.leagueoflegends.com/sites/default/files/lol_global_elements/img/lol-header-sprite.png

answered Jun 13, 2013 at 16:20

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Benji Over a year ago

Where'd you find the lol_global_elements.CSS? I didn't find it referenced in the HTML file. I saw that CSS file name while I was inspecting elements though, but I didn't know where to find it.

j08691 Over a year ago

Line 29 in the source at na.leagueoflegends.com

Benji Over a year ago

D'oh, thanks! I completely missed that. When I clicked lol_global_elements reference in the inspect tool, it opened the html document to line 35. Thanks a bunch! You've been very helpful

user2050393 · Accepted Answer · 2013-06-13 16:22:29Z

2

The img location is relative to the location of the CSS file that includes the styling for this div.

As you can see the css file is:

http://eune.leagueoflegends.com/sites/default/files/lol_global_elements/css/lol_global_elements.css

which means , that the image is here:

 http://eune.leagueoflegends.com/sites/default/files/lol_global_elements/img/lol-header-sprite.png

../img of /css folder is lol_global_elements/img

answered Jun 13, 2013 at 16:22

user2050393

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2013-06-13 16:16:50Z

0

Use an Absolute URL, relative to the site:

url("/img/lol-header-sprite.png")

Always, it refers to http://na.leagueoflegends.com/img/lol-header-sprite.png.

answered Jun 13, 2013 at 16:16

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Comments

Marc Lloyd · Accepted Answer · 2013-06-13 16:16:52Z

0

try

url("/img/lol-header-sprite.png")

answered Jun 13, 2013 at 16:16

Marc Lloyd

3041 silver badge7 bronze badges

Collectives™ on Stack Overflow

CSS Url property on sites?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related