Asp.net C# master page background image set not appearing when the page is executed

Question

1.00/5 (1 vote)

See more:

I am designing a web site in asp.net with C# in Microsoft Visual Studio.
I want to set a full background image in the masterpage and hence the image will appear throughout the website with the help of contentpage.

I did it by
creating a css page 'Stylesheet.css' with the following code

CSS

 html
{
    background:url('Images\finalcollege.jpg') no-repeat center center fixed;
}

Note : I have used CSS and not CSS3.
My software version of Microsoft Visual Studio does not support CSS3

Note : The image is in the same folder as my Project/website.

and in the masterpage the following code to link the external stylesheet.

C#

<head runat="server">
<title></title>   
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

I have even created a content page of the master page..

Now the issue is..when i have done all of this coding in the Visual Studio Software.. when I click on the Design tab of the Content Page to see whether my Background image has been set. I can see that the background has indeed been set.
However when I run the page in browser.. the background image does not appear in the browser.

What I have tried:

I tried refreshing the browser many times but to no avail..

All the contentpages linked with the masterpage show background image being set in the design view of Microsoft Visual Studio

Only when i run the content page in the browser, the background image does not appear.

Please help

Posted 3-May-17 2:12am

Mrunal Pawar

Updated 3-May-17 3:05am

Add a Solution

Comments

F-ES Sitecore 3-May-17 8:30am

Either the stylesheet isn't loading or the image isn't loading. You are using relative paths for both, so your stylesheet.css is only going to load if it is in the same folder as the content page, and the image will only be found if it is in a sub-folder called "images" in the same folder the css file is in. Use the network tab of the browser and look for the request for the css page and see if it succeeds, and if it does the request for the image and see if that works.

We don't know your folder setup but you should at least use Page.ResolveUrl when adding the stylesheet so that it works no matter what location your content page is in, and then make sure the image is in the correct location relative to the css file.

Mrunal Pawar 3-May-17 9:38am

It was a mistake in the url.
Corrected it and it worked

Bryian Tan 3-May-17 8:41am

The path look weird, try below.

background:url('Images/finalcollege.jpg') no-repeat center center fixed;

Mrunal Pawar 3-May-17 9:37am

@Byian Tan
I had used / instead of this \
i changed it and it worked..Thank you

Bryian Tan 3-May-17 9:38am

anytime.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Nirav Prabtani** · Accepted Answer · 2017-05-03T03:05:00

Solution 1

Make sure

1) Image path which you are supplying should correct
2) Use / instead of \ in URL of css

e.g.

background:url('Images/finalcollege.jpg')

Posted 3-May-17 3:05am

Nirav Prabtani

Updated 3-May-17 3:09am

v3

Comments

Mrunal Pawar 3-May-17 9:36am

Thank you so much....
It worked!!

Nirav Prabtani 3-May-17 9:59am

Welcome always..!!