I am using the following css rule:
background: url("http://example.com/background.jpg");
It is not working and I suppose it is because referring to external servers is not supported. Is this true? If so, what kind of workaround I might use?
Not sure if it's relevant, but I need this inline. Testing right now on JSFiddle.
There may be 2 reasons why your background is not working
Your container doesn't have height, width or padding (no area to show the background)
The URL you specified is broken or incorrect. There is no image at the URL you specified.
Otherwise, your background: url("http://example.com/background.jpg"); is Correct
I'm not sure if this was resolved or not but I had a similar problem and I found a simple solution. First off, I used background-image instead of background. Second, I made sure to include the full url. So instead of background: url("http://example.com/background.jpg"); I would put background-image: url("http://www.example.com/background.jpg");
It does work. There must be something wrong with your URL.
http://jsfiddle.net/ebLQQ/
Related
I am trying to setup a simple div which I have done many times in the past but something is going wrong... Here is a fiddle of my code.
http://jsfiddle.net/psychoticpanda/HTtRs/
Either I am going insane, hitting a glitch in something or it is too late for me to code after a 13 hour day of class... Please help me feel sane and help me out! The image works when it is used as <img src="(IMAGE)" /> but when I use it as a background-image: url("image"); in CSS it doesn't work...? I need it to be a background for buttons to go on top without problems! Please help...
If the url() contents are a relative path it is derived from the path of the stylesheet location. So if your stylesheet is /css/file.css and the rule is url(image/filename.png) it will look for it in /css/image/filename.png. You should probably use an absolute path for the image.
Your file path of url("images/map.png") assumes that your images folder is in the same folder as the CSS file. If that's not the case, your path is incorrect. If it is the case, the next thing I'd try (but consider this anyway) is to use background: instead of background-image:—which, on its own, doesn't provide any information about its positioning or whether or not you want the image repeated.
I'm having a problem where I have a background image that will show up perfectly fine when I'm using it in dreamweaver, but once I upload my site and the CSS files and everything it won't show.
Here's my CSS code:
.ELSsubbg {
background-image: url('../images/NTG_images.jpg');
background-repeat:no-repeat;
background-position:top left;
}
Any help would be great.
Because you are using a relative path in your CSS, where the stylesheet is looking for the image may be different than where you are seeing it when you go to it directly in the browser.
Try using an absolute path to your images directory instead of a relative one. Assuming you can see the image in your browser at http://www.website-name.com/images/NTG_images.jpg try removing the dots to make the path absolute from the root of your website.
background-image: url('/images/NTG_images.jpg');
Have you uploaded the image? Have you uploaded it to the right place? Is the CSS looking for it where you think it should be?
The easiest way to answer these questions is to use the browser's developer tools (eg Firebug) to watch the network traffic your page generates. Look for the request where it tries to load the graphic. Is it giving a 404 error? Probably.
If you are getting a 404, look at the URL it's calling to find out why. The answer should become clear.
I'm using the CSS3Pie htc file to enable border-radius in IE8, but I'm getting no effect. My CSS is:
button {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
behavior: url(PIE.htc);
}
I've put PIE.htc in the public root (as is done on the CSS3PIE demo page), having tried in the same folder, using a relative uri and an absolute uri.
The demos are working; just not my code!
Thanks, Adam
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here:
CSS3 PIE - Giving IE border-radius support not working?
The URL of PIE.htc as referenced in behavior: url(PIE.htc); is a relative URL, so it is probably looking for it in the same directory as the stylesheet, so I'd suggest adding a slash to make it an absolute URL. But you say you've already done that.
Check that the URL you're specifying does actually load the PIE.htc file - ie put that URL directly into your browswer and see what comes out. It is possible that your web server is not serving it correctly for one reason or another (not recognising the mime type? etc)
Have you gone through the known problems on the PIE site? Have you added position:relative; to your style? Could it be the known z-index issue?
You specify that it doesn't work in IE8. Have you tried it in IE7? IE6? Same result? (this will eliminate ths possibility of it being an IE8-specific issue)
By the way -- unrelated point, but you should put the border-radius style below the versions with the browser-specific prefixes. This is the standard way to do things, as it means that when for example, Firefox starts supporting border-radius, it'll pick up the standard style over -moz-border-radius. If you've got the -moz version below it, that one will continue getting used, which may not be what you want.
As Daniel Rehner stated, you need to use the position: relative and z-index properties for IE8. If you are using a website with sub directories to call the CSS file, you will also need to use an absolute path in your CSS to PIE.htc - this was one part of our issue.
The other part of the issue could be that your server is not outputting the PIE.htc file as text/x-component. You can correct that via IIS or Apache, or call the PIE.php script in your CSS. More info here: http://css3pie.com/documentation/known-issues/#content-type
Both of these issues had gotten us, and hope they help you out.
I actually had this problem for a completely different reason.
The border-radius will not work if a filter is applied to the same element. I was applying the border-radius to a button with a linear gradient applied as a filter. As soon as I removed the filter the border-radius worked.
This is documented behaviour and gradients should be applied using -pie-background:
http://css3pie.com/documentation/supported-css3-features/#gradients
behavior: url(PIE.htc);
Make sure there is no space between the url and ( as this stopts it from working at all in IE8
Just in case anyone is trying to apply this to table cells, you'll need to apply position: relative to the table element (and not the tdor th, even though those are the elements being rounded).
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');
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.