ASP.NET MVC background image

Question

I'm a newbie in ASP.NET MVC. I'm trying to make a decent site, and I've encountered a stupid problem: I can't set the background to be a local image.

in Site.css, this works:

body {
padding-top: 50px;
padding-bottom: 20px;
background-image: url(http://wallpapercave.com/wp/zJj7EIt.jpg);
}

but I don't want the image be an URL.

I've tried the following things:

Number one:

body {
padding-top: 50px;
padding-bottom: 20px;
background-image: 
url( C:\Users\alexh\Documents\GitHub\StupidASP.NET\StupidASP.NET\StupidASP.NET\Styles\Images\background.jpg)
}

Number two:

<body style="background-image: 
url( C:\Users\alexh\Documents\GitHub\StupidASP.NET\StupidASP.NET\StupidASP.NET\Styles\Images\background.jpg)">

Number three(which is obsolete):

<body background="C:\Users\alexh\Documents\GitHub\StupidASP.NET\StupidASP.NET\StupidASP.NET\Styles\Images\background.jpg">

I must miss something related to resources, and not with properties. Do you have any solution or idea? Or an explication about what vs does.

This has nothing whatsoever to do with ASP, it is a simple HTML/CSS issue. Have you checked the browser console to see if it has anything to say about this? // You should not try and embed stuff into a page via the local file system in the first place, but rather use a relative URL. — C3roe
– C3roe, Commented Jun 8, 2017 at 14:42

scgough · Accepted Answer · 2017-06-08 14:43:30Z

1

Don't use an absolute path. Use a relative path.

if your css file is located here for instance (from the root of your site): /Styles/Site.css

then your CSS should be:

body {
  padding-top: 50px;
  padding-bottom: 20px;
  background-image:url(Images/background.jpg)
}

so, you're saying from where your css file is (/Styles) your image file is a sub-directory of this (/Styles/Images/[the-filename-for-your-image]).

Also, not the use of / rather than \ in your image path

answered Jun 8, 2017 at 14:43

scgough

5,2723 gold badges33 silver badges56 bronze badges

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

Comments

Pawan Kumar · Accepted Answer · 2017-07-02 00:48:27Z

1

Here, the problem is it's not picking the exact file mentioned in the url(), so just try the below scenario.

Create a folder with name Images inside your project folder and then copy all the images into it.

then your css should be

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

this url location means from the root of your project there should be one folder with name Images and inside it there should be the mentioned image file.

edited Jul 2, 2017 at 0:48

answered Jun 8, 2017 at 14:52

Pawan Kumar

1,3747 silver badges14 bronze badges

Comments

Kiril Dobrev · Accepted Answer · 2018-10-30 11:10:21Z

0

Your 'number two' should be like next line, at least the line works with me like this:

<body style="background-image: url( ~/Images/background.jpg)"/>

answered Oct 30, 2018 at 11:10

Kiril Dobrev

8691 gold badge9 silver badges13 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC background image

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related