I've downloaded a background image for my website, and for some reason or other, it's simply not being displayed.
This is the CSS code I've got:
background-image: url(Resources/Icons/background-image.jpg);
background-attachment: fixed;
I've even tried adding the full path name - to no avail.
The strange thing is that I've done this numerous times in my website, and all my images are displayed. It's only this that's giving me a problem - and there is no red cross showing that it cannot find the image - it just doesn't appear.
EDIT: For some reason, if I place the url of the webage where I got the image from, it works.
Any ideas?
Is your css in the same directory as your image? Probably not, I would assume. So you need to get back to the root and access the image properly.
Something like:
background-image: url(../Resources/Icons/background-image.jpg)
Unless your stylesheet resides in the same folder as you images, you should try navigating from the root:
background-image("/images/someimage.png");
Personally, I've found that navigating from the root of the application/site tends to be the most reliable/scalable option.
Wrong path probably...
background-image: url('/Resources/Icons/background-image.jpg');
Related
The image in the masthead of the Bootstrap Template is located in the CSS of the downloaded Bootstrap files, however, when i change the image url to the desired picture and save it, it does not change the image on the page and keeps the old deleted one, what's strange is that when i add the URL in the CSS file on Chromes Dev Tools the preview does exactly what i want it to do but when i do exactly the same on my actual code in the C9 workspace it does nothing and Bootstrap seems to always locate the old default image even though i have gone as far as to completely remove it from my Workspace? If anyone would point out where i am going wrong i would be extremely grateful.
The Bootstrap CSS
header.masthead{position:relative;background-color:#343a40;background:url(../img/bg-masthead.jpg) no-repeat center center;}
I am trying to change it to
header.masthead{position:relative;background-color:#343a40;background:url(http://www.4usky.com/data/out/94/164852092-the-riddler-wallpapers.jpg) no-repeat center center;}
It looks like 4usky.com doesn't allow hotlinking. You'll need to save it and load it from another location and reference that in your background URL.
Just put the url path inside quotes.
header.masthead{position:relative;background-color:#343a40;background:url('http://www.4usky.com/data/out/94/164852092-the-riddler-wallpapers.jpg') no-repeat center center;}
Hope it does the job.
I have a problem when trying to add background image to page from CSS.
Here's one example of how I'm trying to do that:
background: url("/wp-content/themes/bootstrap2wordpress/assets/img/tile.jpg") top left repeat;
But all I get is whitespace.
Can anyone tell me what to do?
Try using the full URL including domain name first. The remove the domain once it works I find often the path is different from what I assume.
I have an iframe that has a background image in a div. The image displays fine with a direct link to the iframe page but when the page is displayed as an iframe (within another page) the image is not visible?
I have checked the code in Firebug and when I hover over the url in the console it just says "failed to load the given URL").
.fd-img{background-image:url('images/fd-img.jpg'); width: 342px; height: 228px; margin: 76px 0 0 205px;}
<div class="fd-img"></div>
For some reason the image displays in the iframe with no problem using an absolute url but not a relative one. I would use absolute but it is not practical at all for what I need to do.
Hope this makes sense.
Not sure why but it appears that AMPPS was the problem. I moved the exact same files to the server and everything worked fine. I was working on my local drive using AMPPS. Nothing has changed server side, I am still using Firefox and the same code so perhaps AMPPS does not like iframes? Hope this helps someone else that is having the same problem.
in css, point url link as if you were in the folder where the .css file is located
iframe's src will point to a page. The src can be set with javascript or however you like, based on event, etc. The <iframe></iframe> itself can't have a background image. You can give it dimensions, ie. width, height, scroll, etc. But content is from a source page.
I'm running into a problem with background image of an <li> loading in firefox.
my original code was:
background: #bdcad7 url(../images/navbg.png) repeat-x;
which works well in chrome and IE but not in FF.
background: #bdcad7 url(images/navbg.png) repeat-x;
also works in IE and chrome but not in FF
The only way to get it working in FF is if I include the next directory level
background: #bdcad7 url(/includes/images/navbg.png) repeat-x;
but that doesn't work in other browsers.
I've tried all variations I can think of ./, ../, include quotes, double quotes, use background-image etc and can't get it to work in all browsers. The relative path just seems to read different in FF (something I've never seen before)
What works in all browsers is having the full url of the image or an absolute path, but eachtake 3 lines on the text editor so I'd like to avoid it if possible.
Any insight as to why firefox is giving me a hard time would be appreciated.
I appreciate all the input.
To the best of my abilities I figured it's a problem coming somewhere on the server side along the directory path.
I've doubled and triple checked the css, tried every variation possible and can't duplicate the error on a test document.
I think the only option is to go for the full absolute path in case someone else runs into the same problem.
background:#F1F1F4 url(/dir1/dir2/dir3/dir4/includes/style/images/background.png) top left repeat-x;
The correct syntax would be
background: #bdcad7 url(../images/navbg.png) repeat-x right top
So you may have to add the last 2 arguments for it to work.
It would help a lot if you gave us the site structure.
Make sure the div containing the background has some height to it. Also, make sure the image filename is relative to the path of the CSS file.
More possible solutions can be found here - Background image is not displayed in Firefox
Try url('../images/navbg.png') with ' '. I do it anyway, and it doesn't seem to hurt, so maybe it will help? Worth a shot.
background: url("../images/navbg.png") repeat-x scroll right top #BDCAD7;
I have a transparent .png image file which I have attached it on my site, however the file has some background colour (grey) which I have no understanding why it is there. It's sure in transparent mode when I open it in any image editor or view, it has transparent background. Why when I link it, and when displaying on my site it isn't transparent ?
This is the method I'm using http://book.cakephp.org/#!/view/1441/image
I've tried embedding the image in CSS but find it a bit troublesome because I need the image to be clickable that links to my homepage.
Anyone can suggest any way to achieve the result I mentioned? ..perhaps some links or scripts that would work..I appreciate that.
:-)
It's possible there's some reprocessing going on. Do you have a link to the image, or better yet a link where we can see the markup / CSS as well?
I found a way to solve this not sure if it's the best but it works.
http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
If you're using IE6, the grey background will be there because IE6 does not support alpha-transparency in images (without using behaviours or hacks).
This might help:
http://24ways.org/2007/supersleight-transparent-png-in-ie6