Solved

master page doesn't regonize background in css

Posted on 2012-04-13
11
296 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

746 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

11 Experts available now in Live!

Get 1:1 Help Now