Setting background image in asp.net (Master page)

Question

I'm new in asp.net. And I am having trouble setting my background image. Here's the master page source:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" type="text/css" href="scripts/style.css"/>
    <title>Tracker</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="container">
                <a href="#"><img src="images/cross-header.gif" alt="Insert Logo Here" width="100%" id="Insert_logo" style="background: #C6D580; display:block;" /></a>

            <div class="sidebar1">
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">LINK</a></li>
                        <li><a href="#">LINK</a></li>
                        <li><a href="#"><span style="font-weight:italic">LINK</span></a></li>
                        <li><a href="#"><span style="font-weight:italic">LINK</span></a></li>
                    </ul>
                </nav>
                    <p>SOME LABEL</p>
                    <p>SOME QUOTE HERE</p>
                    <p></p>
            </div>
        </div>
        <footer>
           <a href="#">LINK HERE</a> | <a href="#">LINK HERE</a> | 
           <a href="contact.php">CONTACT</a> | <a href="register.php">REGISTER</a> | <a href="login.php">LOGIN</a>
            <address>
                Copyright 2012 @JRC
            </address>
        </footer>
    </div>
    </form>
</body>
</html>

The image that I am trying to use is located at the folder image. I don't know whats wrong.

And here's what the style.css source:

body 
{
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;

    background-image:url('images/background.jpg');
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:repeat-x;
}

I also tried this url('image/background.jpeg') etc. but still fails.

Where is your style sheet located in the directory structure? — IrishChieftain
– IrishChieftain, Commented Dec 2, 2012 at 5:07
it is located at style folder. But as 'tjcertified' suggested, I tried to put my style.css in the same folder of my background image (image folder) and it still fails. :( — jomsk1e
– jomsk1e, Commented Dec 2, 2012 at 5:13

tjcertified · Accepted Answer · 2012-12-02 05:13:38Z

12

This largely depends on where your css file is located. If it is located in the same folder where the 'image' folder is located, then this looks correct. However, if you css file is in a different directory (say /css) then your link in your css file will not work. Instead, either change the css link to point to a complete link:

background-image: url('http://mysite.com/images/background.jpg)

I am unsure if the '~' link will work in a stylesheet. Since your css is in the scripts folder, you should be able to do this:

background-image: url('../images/background.jpg')

edited Dec 2, 2012 at 5:13

answered Dec 2, 2012 at 5:07

tjcertified

7147 silver badges18 bronze badges

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

2 Comments

jomsk1e Over a year ago

I already solve my problem, thanks for your great answer. 45 secs left to mark your answer as the best answer. thanks again! :)

tjcertified Over a year ago

Sorry, edits should make this more clear. I didn't look carefully at your master page first. If the css is working as is, leave it in the 'scripts' folder, and use the second link, and all should be well.

Dany Gauthier · Accepted Answer · 2015-01-23 15:02:53Z

0

This worked for me :

background-image: url(<%=ResolveClientUrl("~/images/background.jpg")%>);

answered Jan 23, 2015 at 15:02

Dany Gauthier

8107 silver badges17 bronze badges

Comments

Ravindra Bagale · Accepted Answer · 2012-12-02 05:05:42Z

-1

it is getting confuse, because of your src, it finding it in current_folder+src, but your image folder is in root folder, for that to reach root_folder+src you have to prefix your source with ~/

background-image:url('~/images/background.jpg');

answered Dec 2, 2012 at 5:05

Ravindra Bagale

17.7k9 gold badges47 silver badges70 bronze badges

1 Comment

jomsk1e Over a year ago

Thanks for that info, but it still fails even I did that. :(

thinhvo0108 · Accepted Answer · 2017-05-16 09:53:40Z

-1

Add master page, then link css script and paste the link of CSS using drag and drop method

edited May 16, 2017 at 9:53

thinhvo0108

2,2301 gold badge16 silver badges24 bronze badges

answered May 16, 2017 at 8:34

Tanmay Raman

1

Collectives™ on Stack Overflow

Setting background image in asp.net (Master page)

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related