My question is really boring so i am bored with it. i am C# developer. Also my CSS and html are poor. i designed a login page by using login page
why I can not see images left, right, center?
<td width="198" bgcolor="" style="background-image:url(../../Styles/img/loginimages/login-left.jpg);background-repeat: no-repeat;background-position: bottom center"></td>
You can't use relative url paths with inline style declarations. Declare the whole url or start it with just / to indicate it is under your domain root.
/mypage.png == http://mysite.com/mypage.png
Try
url(http://mysite.com/myimage.png) //or
url(/pathtoimage/myimage.png)
If this were in a CSS file then you could use relative paths, but they would be in relation to the css file.
Maybe wrong path. Try to write path from root instead of relative. Something like this:
/Styles/img/loginimages/login-left.jpg
Or better put it to css file.
Related
Hi this way i give my image path in css. it works some time but not all the time.my site may have many sub folder and then the below path may not works. so i want to specify path in my css in such a way where ever i am on my site pages or whatever pages i will looking at but image show display on page. so tell me what trick i should apply in my css for specifying which works same way for all the pages. thanks
.labeltag {
background-image: url(../images/arrowbackground.png);
margin:2px;
border-radius:5px;
}
Try finding the image from the root of your site instead:
.labeltag{background-image:url('/images/arrowbackground.png');}
Assuming 'images' is a folder in your root directory
edit: I understand code can be more readable (regarding the suggested edit), but there is a reason I type it like this - it's better performance.
Are there any common pitfalls to using this attribute? I can't seem to get it to work. The image is in the same directory as my HTML page and I checked the absolute path which is correct. I also tried setting the background to a random color to see if my div placement was off or something, but the color showed.
I used:
body{
background-image: url('url');
}
Try,
background:url(image.jpg). Notice, I'm not using background-image, and just background
Make sure the path of the image is correct and relative to the CSS file.
Make sure the filename of the image is correct. The filename, including the extension, can be case sensitive.
If the URL is absolute, there's very little that can go wrong. Try creating an <img> element with the src as the url you're trying to use. If that works, make sure you're specifying it correctly in the CSS. Since you didn't say exactly what you're putting in, it's kind of hard to judge.
The url specified inside url() is relative to the CSS file, so make sure your path to the image is relative to the css file.
e.g if your css file is in a folder, and your image in an images folder, and both folders are in the same parent directory, you would access the image in the css with the path ../images/file_name.png
I want to refer to an image in my main stylesheet for a Grails app and I can't get it to work. My image lives in the standard location in my Grails app...
project\web-app\images\outbound-blue.png
In my stylesheet I want to use it as a background image for a class...
.messageimg {
height:17px;
width:16px;
background-image:url(images/outbound-blue.png);
background-repeat:no-repeat;
}
This doesn't work for some reason. My stylesheet is in the normal location too, i.e.
project\web-app\css\main.css
I get a missing image marker when I load the page in the browser. I have checked that I have no typos in names etc. I have also tried fiddling around with the virtual path in the url, but I can't figure out what I need to put in there to make this work in Grails.
I don't want to use GSP and insert an IMG tag into my code because I want to control the image through styles.
So, what am I doing wrong?
A more portable way to specify image locations is to use the resource() function:
.messageimg {
height:17px;
width:16px;
background-image:url('${resource(dir: "images", file: "outbound-blue.png")}');
background-repeat:no-repeat;
}
Try adding "../" at the beginning of the URI. For example:
../images/outbound-blue.png
The "../" at the start of the URI tells the browser to go up one level to the parent directory then look in the images directory. Currently you have it set up to look for a subdirectory called images in the directory containing stylesheets.
Be aware though. Using $resource{... does not work within a referenced .css file. You need to add a style element.
Typically you would reference a resource in a style sheet as a relative url. The url of your image should be relative to the CSS file's location. So ../images/outbound-blue.png from /appName/css/main.css will be referencing /appName/images/outbound-blue.png
If you are still having issues, You can debug this by using a tool like firebug to inspect the page and verify each step in your style.
Verify that:
The item that you think is being styled is picking up the styles.
The image that you are referencing can be accessed both manually, and via firebug.
The css file that you are loading isn't cached and is actually refreshed by the browser.
So the problem seemed to be that the browser was looking into
http://localhost:8080/<app-name>/assets/images/<background-image-name>
which seems correct but if you inspect other images on the page, they render from the path
http://localhost:8080/<app-name>/assets/background-image-name
So, just by excluding images in your path-name should fix the issue. However, this is just a work around which I am sure would have a better explaination and a solution. Cheers.
I am using background images in my css, which, obviously, requires writing URLs in the css file.
So, while the relative path might be the same, the base URL will be different between development and production.
So, is there a better solution than:
1. changing it each time manually
2. using resources on the cloud with full URL
3. making the CSS files parsed as PHP, and using some
code in it (and then I have to fix the problem with caching).
CSS URLs are parsed from the directory containing the CSS. Meaning it won't change. So all you should have to do is give them paths relative to the CSS Directory and you should be good.
CSS/main.css
div {
background: transparent url(../images/background.jpg) no-repeat;
}
i asked that question b4 in another forum
http://www.nabble.com/Root-directory-(linking-CSS-JS-etc)-to23911119.html#a23923742
the solution was to use a view helper baseUrl
<img src="<?php echo $this->baseUrl();?>/images/foo.gif">
I use the symfony framework, and I've found that parsing it as PHP works best. It's the most dynamic, and if you ever need anything more than just a URL, you can with the PHP.
One obvious answer to this is use the purest form of absolute URL, a filename, by putting all your CSS images into the CSS folder. That's used a lot. You gain simplicity in your URLs, you can now move or rename the CSS folder itself without hassle, and your stylesheet gets that little bit smaller.
The boss wants the master page's menu to look nicer. I generated my gradient file with one of the tools available on the net, no problem there..
I tried to make a CSS class for each menu item but when I use the background-image directive and the style builder, I get a line like:
background-image: url('file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite/Images/Gradient.png')
...when what I want is
background-image: url('~/Images/Gradient.png')
The first url will, of course, only work when I'm debugging on my local machine - deploy this and I'm hosed. So many other ASP.NET objects work with "~/" to indicate the top-level directory of the website but my css file doesn't like it and I can't set a background image for the menu control or the menu items - seems like a GLARING omission when I can do it to so many other controls.
What am I missing?
The url in your CSS needs to be an absolute (or relative) url and not use the tilde mapping as it is not a server-side component.
background-image: url( "/images/menu.jpg" );
You're almost there... try this:
.menuStyle
{
background-image: url('/images/BG.gif'); /* Putting a slash in front means its relative to the root. No slash would be relative to the current directory. */
background-repeat: repeat-x; /* assuming you have a vertical gradient. */
}
Hope that helps.
It's not a glaring omission. Not an omission at all. The tilde is an ASP construct. In your CSS it won't have any meaning.
One "replace all" operation and you're set.
Replace file:///C:/Documents and Settings/Username/My Documents/Visual Studio 2008/WebSites/ThisSite with blank.
I have tried setting the background-image property from CSS in my ASP.Net application (i.e. giving the relative path as described in the post). However, it did not work for me. Later, setting the background-image as background-image:url('http://localhost:1701/Images/BannerTileBackground.gif'); it did work..
Please let me know what is the correct approach, and the reason why it didn't work before.