move code from CSS to a master page

dksellou · June 26th, 2015, 03:22 PM

Ok, I have this code in my css file that my master page uses:
header{background-color:white;width:100%;height:140px;background-image:url(Images/Logo.png);background-repeat:no-repeat;background-position:center;}
header a{width:100%;height:86px;display:block;}

I want to move this to my head section of my master page.
I use
<style> </style> and just put inside the code (above).Then I have at the body of my master page a <header> section ....but when I do this, the picture does not show!
Any tips what I am doing wrong?

mmorgan30 · June 27th, 2015, 01:46 AM

is this at run time that your images are not rendering or at design time. resources such as CSS or images are relative to the execution path.

dksellou · June 27th, 2015, 11:32 AM

I don't understand what you are saying....

Imar · June 28th, 2015, 02:43 PM

The CSS you include in the Master Page eventually ends up in the page itself in the browser. If you have a page in the root, you'll end up with something like this:

background-image:url(Images/Logo.png);

which will look for the image in the Images folder in the root of the site.

However with a sub folder (such as /Products/Default.aspx) the image is searched for in a *sub folder of the Products folder* which won't work.

You need to use a root-based path instead:

background-image:url(/Images/Logo.png);

which will always look for the image in the Images folder in the root.

Chapter 7 has all the details.

Why are you adding this to the master page? It's much better to have it in the main CSS file as it can be cached and isn't downloaded with each page.

Cheers,

Imar

dksellou · June 28th, 2015, 03:29 PM

Hi Imar and thank you.
So, you mean if I put it in the master page I should do something like that?
background-image:url(../App_Themes/Monochrome/Images/Logo.png)

Thank you

Imar · June 28th, 2015, 03:44 PM

You should drop the two dots and use this instead:

/App_Themes/Monochrome/Images/Logo.png

so it always starts at the root of the site, regardless of the location of the page that uses the master page.

Can I ask again: why do you have this in you Master Page?

Imar

dksellou · June 28th, 2015, 04:03 PM

ok the reason for trying to do this is probably stupid.
I checked my website at website speed test and it shows the logo.png takes 2,5 kb to load...I thought if I moved it in the master page and Not have it in CSS it would improve performance?

Imar · July 1st, 2015, 08:22 AM

It wouldn't make a difference. The logo is still downloaded from the same location and cached for subsequent requests.

However, by adding more code to the master, each page is now bigger as that CSS needs to be downloaded for each request, instead of being cached locally from the CSS file.

And 2.5KB isn't bad for a logo.

Cheers,

Imar