Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

master page doesn't regonize background in css

Posted on 2012-04-13
11
Medium Priority
?
306 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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
 

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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Creating an analog clock UserControl seems fairly straight forward.  It is, after all, essentially just a circle with several lines in it!  Two common approaches for rendering an analog clock typically involve either manually calculating points with…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…

715 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