CSS Backgrounds in MVC3 - Continued

Question

I recently bought a download theme that I am trying to apply to my MVC3 Web App project.

I am having problems getting a background image in social-icons.css for rendering.

In _Layout.cshtml, I refer to:

link href="@Url.Content("~/Content/social-icons.css")" rel="stylesheet" type="text/css" 

in the title.

Inside social-icons.css:

  [class^="social-"], [class*="social-"] { display: inline-block; width: 40px; height: 40px; margin-right: .3em; line-height: 40px; vertical-align: text-top; background-image: url("img/icons/social-icon-set.png"); background-position: 40px 40px; background-repeat: no-repeat; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; } 

I checked both ways social-icons.css and social-icons-set.png and everything appears up and up.

I checked Q&A here and it did not help me. CSS background images in MVC3

I would like to apologize in advance for any unclear information.

Answer 1

You have the wrong image position.

Here is what you have:

 background-image: url("img/icons/social-icon-set.png"); 

And as we can see your screenshot, social-icons-set ( note additional "s" ):

Answer 2

Any paths in CSS files always refer to the css file itself. Is png located in Content/img/icons/social-icon-set.png ?

Because this is where the CSS file and your information suggest what it should be.