I am using basic template for mvc 4.I want set background image for my div element.My stylesheet located in "~/Content" directory.Here is part of my .cshtml file where I am trying direct specify image without css:
<div id="add_image" class ="image_bar" style="background-image:url(add.jpg)" ></div>
Here is my css:
#add_image {
background-image:url('~/add.jpg');
}
#add_image:hover {
background-image:url('~/addhover.jpg');
}
.image_bar {
width:40px;
height:40px;
}
Neither css neither direct "styling" not works - whats wrong? Thanks.
In your second example, you are using the '~/' moniker, this is a .NET thing that instructs the code to look at the root of the site. Since the .NET engine does not process your CSS file, the '~/' has no effect and probably makes a really ugly HTTP request to the server.
Since you have your CSS in your Content directory, one solution is to create a sub directory in your Content called 'images'. Store any and all of your CSS images in that folder. Then, from your CSS file, you can call and reference images in that file as such:
#add_image {
background-image:url('images/add.jpg');
}
#add_image:hover {
background-image:url('images/addhover.jpg');
}
This is assuming a directory structure like so:
Content
images
add.jpg
addhover.jpg
site.css
Though I am not a designer, I believe that CSS will look for images relative to the location of the CSS file and not the root of the web application like HTML. Additionally, if you stored images in the same directory as your CSS file, then you should be able to call those images without the 'images/' prefix. However, most like to keep resources separate.
Instead of
background-image:url('~/add.jpg');
try using
background-image:url('./add.jpg');
try with
background-image:url('../add.jpg');
try this
**example -
background-image:url('../img/home_bg.jpg');**
background-image:url('../**ImageFolderName**/add.jpg');
Related
I have this code
a:after{
content url:(/path to my image/my_image.png)
......
}
and it works fine. But I am now migrating my site to WordPress. I can't use the WordPress function get_theme_file_uri(); to get my image path Or is there another alternative.
Unless you're running your CSS documents through a PHP eval() function (which you shouldn't do by most standards) there isn't a good way to execture PHP inside of CSS. The best way to solve your issue is linking directly to the image.
Assuming your directory structure is something like:
[..]
[wp-admin]
[wp-content]
[uploads]
[images]
--my-image.jpg--
[wp-includes]
--other files--
You could use it by simply using a relative path to the file, like:
a::after {
content: url(/wp-content/uploads/images/my-image.jpg);
}
CSS urls are relative to the CSS file.
if you have structure like
..
images
my_image.png
index.php
style.css
you can use a relative URL like:
a:after{
content url:(images/my_image.png)
}
I want to create an extension which contains an AssetBundle, which provides a simple static CSS file. In that static CSS file, I want to use an image file, which is also part of the extension.
How can I know the image file's URL so I can use it inside the CSS file?
If I register the image file as an asset, it will get a random URL that we cannot predict! So it would be impossible to do something like:
.some-selector {
background: url('/assets/?????/image.jpg');
}
So, how can this be done?
For further clarification, here is an example folder structure of such extension:
extension/Widget.php - some widget that registers our AssetBundle
extension/AssetBundle.php - asset bundle that registers the css
extension/assets/css/style.css - the css
extension/assets/images/image.jpg - the image we want to use inside style.css
In this case I would recommend to include also a new css files into the asset definition. In this case the image and css file will be in the assets folder and you can specify relative path, not absolute.
e.g.
/assets/a4dc56/image.jpg
/assets/a4dc56/style.css with the following content:
.some-selector {
background: url('image.jpg');
}
I have tried to link a path for an image in my CSS several different ways but it won't work is there anything that I'm missing?
background:src="C:\Users\simcity\Documents\HTML\Header.jpg";
It looks like you're trying to set a background image.
In that case
background: url('C:Users/simcity/Documents/HTML/Header.jpg');
would be the appropriate method.
Actually you must not use local paths, but else URL paths so for example:
background:src="C:\Users\simcity\Documents\HTML\Header.jpg"; might be:
background:src="Header.jpg"; if your image resides at the same level of your html document or background:src="/path/to/your/html/and/img_folder/Header.jpg"; if the image is in another folder (the folder must be at the same level of your html)
EDIT:
is background:url('path for the image') not background:src="path for the image"
I think the CSS syntax what you are looking for:
#id {
background: url("C:\Users\simcity\Documents\HTML\Header.jpg");
}
How to access images that are one folder above. The background-image does not appear in the html because of wrong directory or reference.
background-image:url("imgs/hours.png");
#schedules{
float: left;
margin-left:10%;
background-image: url(file:///C|/wamp/www/web/crosscafe/imgs/hours.png);
}
span {
font-weight:bold;
}
As said before, and just to make sure, if you're using WAMP you need to access the webpage through the localhost or any address that was provided for that purpose. Accessing through file:// normally ignores most of the server-side usage WAMP provides you with.
That being said, I think your problem is fairly simple. If you are using a framework file structure you probably have the following strcture:
imgs/
css/
js/
index.html
So, and since you're working on your CSS which is in the css subfolder, your URL needs to be the following:
background-image:url("../imgs/hours.png");
The two points (../) tell the browser to go to the parent folder, then into the imgs folder and then search for hours.png.
First of all, you should only comment css using /* and */. // in css will not be treated as comment at all.
For your problem, you should use firebug to make sure that your element which id is schedules have a appropriate height and width.
And, if you are using WAMP, access your website from a URL start with http://, that page could not display a image stored on your local side, I mean, via file://. This is prohibited by your broswer. You should use the relative path instead, and the relative path is start from your css file.
So you can try this:
#schedules{
float: left;
margin-left:10%;
background-image: url(imgs/hours.png);
height: 100px;
width: 100px;
}
and save "imgs" near your css file.
If you still have problems, I think you should paste your HTML on.
If you try to display an image from that imgs directory in other place in your website, does it is shows? If not, it can be your .htaccess file. It might be blocking the access to your images dir.
I am having a problem with image paths in my css. My directory structure is below with folders in bold.
mp.master has a reference in it for menu.css, both of my testpages are using mp as its master page. testpage2.aspx (in the root folder) looks correct, testpage1.aspx (inside of a sub folder) is not able to find images (ie navBG.png) specified in menu.css. If I move testpage1.aspx to the root it works fine.
Other styling in menu.css is applied to testpage1.aspx, just not images.
WebSiteFolder
css
menu.css
img
navBG.png
SubDirectory
testpage1.aspx
mp.master
testpage2.aspx
In menu.css I have the following:
.no-cssgradients nav, .no-js nav { padding-bottom:4px; border:none; background:url(../img/navBG.png) repeat-x 0 0; }
What am I doing here? I have tried to state the absolute path with ~/, ./, ../ but nothing seems to work.
You should try /img/navBG.png. Basically this means that you are using an absolute path in css. Caution: absolute path in css means that the image uri is in the following pattern [host name] + [url you have specified in css], so if your site is located in virtual folder the uri won't be resolved correctly.
have you tried /img/navBG.png?
You're going to want to use absolute pathing rather than relative. /img/navBG.png is what you're looking for.
Drag the CSS file from Solution Explorer to the head section of the master page in code view :)
Your CSS rule and path are correct.
I found my answer here How to get JqueryUI to work with ASP.Net Master Pages and multiple paths?. I was making a site to try out some css3/jquery stuff and my problem was not in referencing my css, but in referencing the jquery library.
this.Page.ResolveURL is your friend here:
<script type="text/javascript" src='<%= this.Page.ResolveUrl("~/resources/js/jQuery.js")%>'>