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
Related
I'm trying to get the image in my C:\Images directory, I've seen css about background-image: url() but I can't find a directory based css for that or did I use the wrong css type?
Here's my css so far:
body
{
background-image: url('C:\Images\background.jpg');
background-repeat:repeat;
}
Don't use static paths in your CSS or HTML such as 'C:\Images\background.jpg' This makes your site non-portable and easy to break.
Always use relative paths when referencing the other files in the site. The browser knows how to resolve the path and requests the full path based on where the site is located.
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.
Is local file the only allowed as url attribute value in CSS background-image property?
It can be from anywhere, just make sure your path is correct.
background-image: url(images/file.jpg);
For example would be to an image in the 'images' folder. ../ will help you navigate back between folders but I try to stay away from it for larger sites. Absolute URLs should work too, but should also not be relied on in case the image is removed.
You can use any URL supported
No, did you try it with a full URL?
I believe you can put any image file as a background-image.
You just have to specify the full path:
http://soundslikedesign.co.uk/images/photography/QE2%20and%20Chopper.jpg
.item {backround-image: url(http://soundslikedesign.co.uk/images/photography/QE2%20and%20Chopper.jpg)}
Cakephp is giving me some problems as I have set as below (I have tried any number of urls, through localhost, placing it in webroot and giving reference from that file, giving full route from localhost (this is a local test ubuntu machine, not a 3rd party server), etc, etc but it just doesn't show up.. I am using a custom layout that overrides the default layout and, as far as I can tell, it contains no reference to any sort of background image.. here is from my css file:
body {
background-image: url('http://localhost/site1/app/webroot/img/bg1.jpg');
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
font-size:90%;
}
I have tested that this works fine with a regular HTML file, I am hoping someone has an idea of what cake is up to that is giving me this problem.. thanks
EDIT: I have tested and I can display exactly the same image within a DIV (as its background) from the same css file.. something in Cakephp is overriding the body background-image setting, but I can't figure out what.
Place images in webroot/img
Place CSS in webroot/css
Write relative paths to references images in CSS styles:
background: url('../img/imagename.png');
You spelling for background is wrong:
ackground-image: url('/root/Desktop/bg1.jpg');
If that is not the case in your actual code, make sure that you are specifying the correct path, try adding a dot before /root/
background-image: url('./root/Desktop/bg1.jpg');
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.