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.
Related
I'm using visual Studio Code and using live Server to see what it looks like as I'm coding.
Here's the dilemma I'm having. After coding it looks great on live server.
But when I open it directly into a browser (I've opened in chrome, firefox and explorer), everything works except the images doesn't show. (my background image, logo, icons, pictures will not display).
I transfer all files to my other laptop and same result
All my images are in CSS using the background attribute. Everything else works, font color, shadow, border, hover etc. except the images wont display (except in live server). Has anyone else have this issue and if so, how did you resolve it?
I've attached a screen capture of my code...I commented out all information in body. commented out the other css file and commented out all css code except for body tag, should work, but still will not show the body image. the picture file is located in the same location as the html file. I've used quotes and without quotes around the url address and same results.
I used my other laptop and coded the same thing on that (except using different image) the image worked on that one.(used visual studio code on that laptop as well)
I'm at a lost as to why this is happening. any help is appreciated. as I really dont want to have to re-write the html and css again.
html and css code
Does your Webserver have the permission to view the image?
The way you wrote your css implies that the image is in the same folder as your .css file.
If it is not so do it like "../path/to/file.jpg"
If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.
This is the site:
http://grafistas.com.gr/perle/?page_id=105
If you open it and go hover over a product title an image will pop up. In all browsers seems to be okay.
But in Chrome the image is way at the left.
Inside the js file, the xOffset is positive number but the yOffset is a negative number. Does Chrome not understand negative numbers?
I also read somewhere that a possible fix would be to load the js file at the very end so that the image could be loaded and Chrome would read its width/height. I tried it but nothing changed.
Anyone knows what's wrong?
I changed the class that the preview image was embeded and now it works perfect! Thanks me! :P
In any modern browser, when you visit an image url (eg, http://i.imgur.com/xrM9q.jpg), it automatically resizes that image and gives you the option to "zoom in" with a little magnifying glass. This is not always the case with an iframe:
<iframe src='http://i.imgur.com/xrM9q.jpg'> </iframe>
If you link an iframe to an image, Firefox will give this nice behavior: it starts out behaving like max-width: 100%; max-height: 100%, then you can click on it to make it big.
However, in Chrome, the image is just full-size. Try opening this example in Chrome and Firefox.
How do I get Chrome to handle images "smartly"? That is to say, have the default behavior show a magnifying glass cursor and provide auto-resizing?
(To clarify: I want this to work in a Chrome extension. The only solution I've come up with so far is to put a content script on all pages and manually change styling on images on the page. That solution sucks, so I'm hoping for a method that is less hacky and doesn't effect every page the user visits)
Try making the iframe refer to another html file and in that html file put the img tag with the width and height constraint. I think it will work on most browsers this way.
I'm building a webpage with a bunch of images that are all coming from Rackspace Cloudfiles on their Limelight CDN. Occasionally the page will finish loading, including the images, and Chrome/Webkit will fail to render some images at all.
Chrome doesn't render a "broken image" in their place, and if I check the Resources tab in the Inspector, they are listed and the data is all loaded up. The non-rendered images show the same info as the properly rendered ones.
This usually occurs when I go forward a page and then go back (via history). It persists if I reload the page, unless I do a hard refresh (⌘⇧R in Chrome), then they all show up like normal again.
I'm not loading the images in JavaScript or anything strange like that, nor do I have any CSS that hides the images. This only happens in Chrome, and it doesn't happen in Incognito mode from what I can tell.
Any ideas what's causing this? If it's a bug, how do I go about reporting it to the Chrome team?
Update
I checked the headers in the Network tab of the Inspector and it turns out that for the images that are rendered, Chrome is only showing it's header metadata, like this:
And for the images that don't render properly, the metadata is shown along with the full request and response headers with a 304 Not Modified status.
This is still happening. On multiple computers, on several websites. There's a thread about this happening over the Google support forums as well.
This might be a Chrome/Webkit bug:
http://code.google.com/p/chromium/issues/detail?id=20960
This was a Chrome bug that has since been resolved. It is not the bug linked to by thatmarvin.
I had the same problem with thumbs images using the latest chrome. Images were rendering time to time. I changed image style:
width: 150px; height: 100%;
to
width: 150px; height: auto;
And "height: auto" has fixed bug in Chrome.
Hope the founded solution will help in some cases.