CSS Background Images in MVC3 - Continuation

Question

I recently purchased a bootstrap theme that I am attempting to apply to my MVC3 Web App project.

I am having problems getting a background image in social-icons.css to render.

In _Layout.cshtml i have referenced:

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

in the header.

Within 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 have checked both the paths of social-icons.css and social-icons-set.png and everything appears on the up and up.

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

Would like to apologize in advance for any unclear information.

Hello Farrowdm, and welcome to StackOverflow. Your question looks good and clear to me, so i hope we can be of help. — Timothy Groote
– Timothy Groote, Commented Mar 13, 2013 at 13:41

Mathew Thompson · Accepted Answer · 2013-03-13 14:45:56Z

2

You have the image location wrong.

Here's what you have:

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

And as we can see be your screenshot, it's social-icons-set (note the extra "s"):

enter image description here

answered Mar 13, 2013 at 14:45

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

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

2 Comments

farrowdm Over a year ago

Haha, I'm sick to my stomach. Thank you very much.

Mathew Thompson Over a year ago

@farrowdm Hehe no problems, these things happen to all of us! Welcome to SO :)

Timothy Groote · Accepted Answer · 2013-03-13 13:40:36Z

1

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

Because that is where the CSS file and your info suggests it should be.

answered Mar 13, 2013 at 13:40

Timothy Groote

8,69229 silver badges53 bronze badges

1 Comment

Timothy Groote Over a year ago

Clearly not. (see Mattytomo's answer)

Collectives™ on Stack Overflow

CSS Background Images in MVC3 - Continuation

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related