Page is loading without rendering style.css

Question

Here is my project directory where I have

style.css

under Content and

image.jpg

under Images

Login.aspx page is default page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="LoginDemo.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <link href="~/Content/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

    <title>LOGIN</title>

</head>
<body>
</body>
</html>

And here is CSS

*{
    margin:0px;
    padding:0px;
}

body{
    background-image:url(Images/image.jpg);
    background-size:cover;
    background-attachment:fixed;
    font-family:Times New Roman ;
}

Page is loaded successfully but without loading background image. Please help me. I read different article and as per suggested solutions I do the same steps but still there is problem.

Why the runat="server"? usually that attribute implies some server side execution/processing and in the stylesheet it looks unnecesary (problematic since there is no handler configured in IIS for css extension). — Cleptus
– Cleptus, Commented Oct 4, 2018 at 12:47
@Sigma yes I clear the cache and use fresh browser. bradbury9 I read 1 article and there they suggest to use runat=server — Salman Mushtaq
– Salman Mushtaq, Commented Oct 4, 2018 at 12:49

Ashkan Mobayen Khiabani · Accepted Answer · 2018-10-04 12:45:32Z

3

Images is not in the Content folder. so in your css, you should go back a folder:

  background-image:url(../Images/image.jpg);

Note the ../ before Images folder in the path

answered Oct 4, 2018 at 12:45

Ashkan Mobayen Khiabani

34.4k35 gold badges112 silver badges187 bronze badges

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

2 Comments

Salman Mushtaq Over a year ago

thanks dear now I understand. But 1 question why its not working when I use url(~/Images/image.jgp)

Ashkan Mobayen Khiabani Over a year ago

@SalmanMushtaq you are welcome. I'm not sure but i think ~/ has meaning in Asp.net and not css

Siavash · Accepted Answer · 2018-10-04 12:44:56Z

2

put a single quote before and after your image path,and also use (..) to refer up directory, so correct your css code with these lines:

*{
    margin:0px;
    padding:0px;
}

body{
    background-image:url('../Images/image.jpg');
    background-size:cover;
    background-attachment:fixed;
    font-family:Times New Roman ;
}

and where is your webpage location ? is it in a directory ?

answered Oct 4, 2018 at 12:44

Siavash

3,0094 gold badges31 silver badges42 bronze badges

2 Comments

Salman Mushtaq Over a year ago

Thanks. But still I am confused why its not work when I used url(~/Images/image.jpg), Web pages located under project directory

Siavash Over a year ago

@SalmanMushtaq your welcome Salman, i think css doesn't understand (~) character and also css files are located in a sub-directory which you should go up directory then addressing your own folder that image located.

Athar Mallick · Accepted Answer · 2018-10-04 12:55:15Z

0

Create an error in style.css file, compiler didn't listening the file. clean the solution and Rebuilt it again. Surely It will work.

answered Oct 4, 2018 at 12:55

Athar Mallick

195 bronze badges

Collectives™ on Stack Overflow

Page is loading without rendering style.css

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related