Solved

master page doesn't regonize background in css

Posted on 2012-04-13
11
297 Views
Last Modified: 2012-04-13
why doesn't my master page see this style sheet. this style sheet is declared in app_themse folder. if i just hard code the line below in master page, it will work fine but as soon as i put that line of code in css file, it stop working. please help

body {font-family:Arial; font-size:14px;background:url(images/navigations/test.png);}
0
Comment
Question by:StewSupport
  • 6
  • 4
11 Comments
 
LVL 14

Expert Comment

by:nishant joshi
ID: 37844387
might your font will be good but you are facing with an issue with image,an i right?
0
 

Author Comment

by:StewSupport
ID: 37844392
yes. the image just doesn't work.
0
 
LVL 38

Expert Comment

by:PaulHews
ID: 37844409
In your CSS file, the images folder must be figured relative to the app_themes folder, rather than where whatever page you are on resides.  
Try this:
body {
    font-family:Arial; font-size:14px;background:url('../images/navigations/test.png');
}

Open in new window


The .. brings you one level up, where hopefully you will find the images folder.  If not, then you have to figure where the path is relative to the folder that the CSS file lives.
0
 

Author Comment

by:StewSupport
ID: 37844421
well the master is at the root then i have
mastert
images folder
......navi folder
.............image files


i added the ../ still doesn't work.
0
 

Author Comment

by:StewSupport
ID: 37844516
code below will work fine if its just html file. but when copy and paste css to css file in apptheme folder in asp.net it stop working. ofcourse the path of the image is changed to correspond with the path of the asp.net web app

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <style type="text/css">
    .links {
    font-family:Verdana, Arial, Helvetica, sans-serif;
	display:block;
    background:url(test.png) center top no-repeat;
    height:98px;
    width:176px; 
    text-align:center;
    font-size:10pt;
    text-decoration:none;
    }
    .links:hover {
    background:url(test2.png) center top no-repeat;
    }
    </style>
</head>

<body>
<a href="#" class="links"></a>
</body>
</html>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:StewSupport
ID: 37844604
ok i pasted in http://localhost/images/test.png and it works fine so what would be the correct path for the image. i tried ../images/test.jpg and /images/test.jpg and images/test.jpg  and it just doesn't work
0
 
LVL 38

Expert Comment

by:PaulHews
ID: 37844625
StewSupport,
well the master is at the root then i have
mastert
images folder
......navi folder
.............image files


i added the ../ still doesn't work.

Where exactly is the CSS file located?
0
 

Author Comment

by:StewSupport
ID: 37844633
mastert
images folder
......navi folder
.............image files
app_themes
......nav
.............nav.css
0
 
LVL 38

Expert Comment

by:PaulHews
ID: 37844650
So you see from nav.css you have to go up two levels to get to the root...  So use:

body {
    font-family:Arial; font-size:14px;background:url('../../images/navigations/test.png');
}
0
 

Author Comment

by:StewSupport
ID: 37844655
really wow? wouldn't the ../ does the trick? or ~/ tells it to go to root?
0
 
LVL 38

Accepted Solution

by:
PaulHews earned 500 total points
ID: 37844677
See:
Absolute and Relative Paths
http://brugbart.com/Articles/paths

wouldn't the ../ does the trick? or ~/ tells it to go to root?

You can't use tilde (~) which is mapped using page behind code.  CSS does not recognize or run this code.  

You can specify a root with a preceding /  

background:url('/images/navigations/test.png');

Open in new window


 ... But it might not be a good idea to if you ever plan to run the code in a virtual directory, so you would be limiting how you can deploy the application.  The relative path mentioned is probably the safest and most portable option.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Microsoft Reports are based on a report definition, which is an XML file that describes data and layout for the report, with a different extension. You can create a client-side report definition language (*.rdlc) file with Visual Studio, and build g…
If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
Concerto provides fully managed cloud services and the expertise to provide an easy and reliable route to the cloud. Our best-in-class solutions help you address the toughest IT challenges, find new efficiencies and deliver the best application expe…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now