I must be missing something completely obvious here, but can't find anything online to tell me otherwise.
I'm trying to pull a .png into a page using:
background:url(img/runner1.png) no-repeat;
I know the path is correct because doing the same with a jpg works:
background:url(img/header.jpg) no-repeat;
It does seem to work in Safari, but not in Chrome or Firefox.
Am I missing something here?
EDIT -
I am using:
#runner1{
background:url(img/runner1.png) no-repeat;
float: left;
border: 1px solid #FFF;
width: 195px;
height: 205px;
}
for the following element:
<div id="runner1"></div>
The page is just running locally from my desktop (so no server involved).
As mentioned previously the paths aren't the problem because a jpg from the same directory works.
Firebug says:
runner1.png
GET
Success
image/png
index.html:201
0B
8ms
But I can't see the preview or response in Firebug.
Also accessing the file directly returns the same result.
Solved!
It would appear that saving PNGs with Photoshop creates a PNG which isn't compatible with chrome or firefox. So instead, I opened the file with Fireworks, re-saved and the pngs are working.
My guess is that you're missing /. Try absolute url path.
I had the same problem with .png files saved from IrfanView: they would not be displayed as a background image before I unchecked the "Save Transparent Color" option in PNG save options. So I guess PNG should be saved without transparent colors to be displayed as background images.
Related
I have a background image with background-attachment: fixed, which works fine in all browsers in localhost but does not show in chrome on the server.
.bg-contact{
background-image: url(../images/bg-contact.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
background-size: cover;
}
Please help
Try clearing the cache on that Chrome.
There's also an extraneous { which maybe Chrome is sensitive to.
Couple more things: try adding ' ' as in ('../images/bg-contact.jpg'), and check AdBlock in Chrome.
Check the file extensions for the background, remember that capital letters make difference for example on your PC JPG and jpg is the same thing but on the server those are completely 2 different pictures.
Also include link to the website or add the code of it if you have problems with it.
-----New Idea For Answer------
You have:
background-image:url(../images/bg-contact.jpg);
Make it with a full path to the file
Use Chrome Developer Tools from your Chrome Browser to get to inspect the element where picture should be displayed, then check if the value of background-image is:
-Not crossed: then is should be working and it is not a problem with a code but with the browser.
-It is crossed: Then your background property is not working, you can add !important to it to get a quick fix but you should find the reason behind it and fix it asap.
Turned to be path issue, especially for Wordpress. When one is setting
background-image: url('bg_1.jpg');
in his themes/myTheme Folder, the browser is loading from http://127.0.0.1:80/wordpress/bg_1.jpg
, while the file is actualy in C:\xampp\htdocs\wordpress\wp-content\themes\myTheme
That is why one should say:
background-image: url('res/bg_1.jpg');
and make new folder wordpress/res in which bg_1.jpg will reside.
I am trying to load background image to a page using Dreamweaver. It shows in IE and Edge but not Chrome or Mozilla. I have tried moving the photo's location (file path) and tried in both straight HTML and CSS with the same result. I cannot find another way to write the code or think of one (being very new to this) so that it will show in all browsers. This is the CSS code:
background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')
set in the body brackets;
and html:
<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">
Everywhere I look I find examples with ellipsis points, like url(...website.com/greanleaf.jpg) and the dots totally confuse me. I think perhaps I need help with how file paths work.
This is due to the implementation of the body and html tags in Firefox and Chrome browsers. the body and HTML tags are only as big as the HTML content of them. where as Edge and IE the HTML and Body are auto sized to the size of the view port.
Add this to your CSS
body, html{
min-height:100%;
min-width:100%;
}
Ok , so if your code is correct and the image it's shown in IE and edge try to
refresh your browser but not normally with this command : Control + Shift + R
so that you're sure to be running the latest and greatest version of what that web
site's serving.
First, you'll need to be sure that the browser is correctly locating the image.
A good way to be sure is looking at Chrome's network tab. Hit F12 in Chrome to reveal Developer Tools. Click the Network tab and then refresh the browser. You will receive a list of resources that have/have not loaded. If your image is listed in red, then it failed to load. Your problem will be an incorrect path.
This is a good resource for understanding relative file paths.
https://css-tricks.com/quick-reminder-about-file-paths/
However, if it did load successfully, the image isn't showing for another reason. Without seeing all of your code, I can only make a guess. Is the container that your image is in empty? Without content or a specified height, the background image won't show in some browsers.
I was doing a work for a client when I got this problem:
The background images stop loading after 26 background image (tried to change images for fakeimg.pl images and I tried to disable the lightbox too).
Any idea what would cause that?
I added a if GET test=stackoverflow to show the pictures.
Here's the link: http://amenagementscomcept.com/index.php?page=realisations&test=stackoverflow
Edit: Forgot to mention here, the problem is in IE8 and IE9
Edit2: Deleted the picture, re-uploaded it, it's still bugging at the 26th picture
Internet Explorer doesn't support for CMYK JPEG
If you have ImageMagick:
identify -verbose image.jpg
will show you the image colorspace. If it's CMYK, you can convert to RGB with:
convert broken.jpg -colorspace RGB fixed.jpg
Or try in Photoshop, Convert your CMYK files to RGB. RGB files are support by IE.
Good Luck !
On my site - http://appliedcodingtech.com/site/factory_automation_photos, an image towards the bottom does not show up in IE8, but it shows up just fine in FF and Chrome. What is wrong?
The broken image is a CMYK .jpg, which IE8 does not support.
It looks like it's an issue with the image (corrupt or whatnot). Just opening the image in a new tab doesn't even work. My advice is take a screen cap of it and save that as Twin_belt_transport.jpg and re-upload it.
I think it is a corrupt image - I used Paint.Net to open the image and re-saved it, and now IE will display it.
Apparently the image is corrupted (applications may handle this in different ways) or is stored in a way that is not supported by IE. Try saving the image again using an image editor.
The problem lies in the image itself. IE cannot open it from disk either. It is indeed a jpg image (it has the 'exif' header), although I don't have the tools at hand to study exactly what's wrong with it.
Good question.
It seems that the image file is corrupted. Re-uploading it would definitely fix it!
But also some pointers
Thumbnails are too big. Use different images for thumbnails and for
view purposes. It loads slow and doesn't look professional at all :(
Your using .jpg and .JPG file extensions. For a more beautiful code,
use only lowercase .jpg!
There are spaces in the filenames. Use _ or -
I have a slider that is not loading pictures in safari. I don't think it has to do with the slider. I checked the Chrome Emulator and it says there is an error with "Get --image location-- 404 (Not found)". However, in IE, Firefox, Chrome the image is found. I'm not sure where the issue is....
The files were initially in jpg, then I saved them as png (this made the files much larger). I had one that had a file name "laser.jpg" that when I changed it to "laser.png" and changed the corresponding code it worked.
Is there something about the file names that could cause a problem? (Does it not render capital letters vs not?) All of my other .jpg and .png files load perfectly.
Is this more related to image resolution for Safari? I read somewhere that safari has a memory load limit, is this what I'm running into?
The images are 72 dpi and are 1000 pixels in width.
img class="sp-image" data-default="images/sIMG4826.png" data-retina="images/IMG4826.png" src="images/IMG4826.png" style="width: auto; height: 100%; margin-left: 0px; margin-top: 0px;"
I was trying to place higher resolution images for the Retina Display users, but it was causing issues.
If you run into this. Just use the same resolution image as you would for any other computer.