CODEWITHSUNDEEP
cssimagebackground
Alex Huiculescu
Alex Huiculescu

Reputation: 139

ASP.NET MVC background image

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.

Upvotes: 1

Views: 6646

Answers (3)

Kiril Dobrev
Kiril Dobrev

Reputation: 871

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)"/>

Upvotes: 0

Pawan Kumar
Pawan Kumar

Reputation: 1374

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.

Upvotes: 1

scgough
scgough

Reputation: 5252

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

Upvotes: 1

Related Questions