I have a background image that is ~300kb in size.
For some reason it will not load on my webpage even after several minutes.
This is the code where I am using the background image. It is in the same level as my webpage.
Am I doing something wrong here? Or is the image too large..?
Thanks.
body {
background-color: #D2C7AC;
background-image:url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
I think the problem is solved. Thanks for the help :)
The image url should be in quotes.
background-image:url('background.jpg');
You can check the network tab in the developer tools to make sure that the image is being found correctly as well (make sure it doesn't return a 404).
You can try using Fiddler to investigate:
http://fiddler2.com/fiddler2/
It will help you see exactly what's happening in the background.
Related
I have this JPG image that I am trying to use in CSS as a background-image for a div container. All different images I have tried work, but this one just wont render in the viewport. If I go to inspect element, it shows the thumbnail when I hover over the elements URL.
I have tried everything including:
Putting it in an img tag and giving it a static height/width
Converting it to png and svg'
Compressing it
Scraping the metadata
Using it in a different HTML/CSS file
import image from "./image.jpg";
//using React.js
<img src={image} className="image"/>//<-- doesnt work in img as src
<div className="imageBg"></div> //<-- doesnt work in div as bg
.image {
height: 100px;
width: 100px;
}
.imageBg {
height: 100px;
width: 100px;
background-image: url("./image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Here's the culprit: (its just a 2000x2000 729KB .jpg mockup image edited in photoshop)
Is there something wrong with this image?
If you guys dont believe me, heres the bug in action: codesandbox.io/s/hardcore-kare-212iuy?file=/src/App.js
It works fine when I open that in an incognito window, but if I open it in a regular window…
… the file name in your live example (although not in the code you included in the question) ends in ad0.jpg which is a naming convention that triggers common ad-blocking algorithms.
Don't call it that.
Moral of the story: If an image isn't loading then look at the Network tab of your browser to find out what happens when the browser tries to load it.
There is a high chance of the Image getting Corrupted, try doing a small edit in any editing software (photoshop, or even system default apps) and save it again and try using it!
You can also simply take a screenshot of it and try using it in your code
If that doesn't work, you can use this link https://i.stack.imgur.com/LGYHM.jpg in your src as a string, this is the image uploaded to Stackoverflow's drive and test it for time being! if that works as a permanent solution create an account and Try Uploading it to a Cloud Assert Provider like Cloudinary and add it as a Link in the src
I am currently building a website and ran into a issue with my code. I am trying to set an image as a background for my header. I have checked the path to my image, the spelling of everything, and have checked my syntax online. Everything seems to match, so I don't understand why my image is not popping up. Any help you guys can give would be amazing. Thank you. Below is my css code:
header {
text-align: center;
background-image: url("image/concert.jpg");
background-size: 700px;
height: 333px;
width: 500px;
}
In addition to what other people already commented on your question, it is worth noting that the filepath must be relative to the css file's location.
Say your entire project is in a folder named root, and css is located in root/css/styles.css but image is in root/image/concert.jpg, then, from your stylesheet, you should call the image like background-image: url("../image/concert.jpg");
Like #David Alsbright said, you should check the development tools console of your browser. It will help you determine if there's a problem with the file path.
I have this div :
<div id="trees"></div>
Formatted with this css:
#trees {
width: 100%;
position: absolute;
top: 37%;
height: 40%;
background: url("/img/Tree.png") repeat-x;
background-size: auto 100%;
}
It works fine in all the browsers I tested, with this result:
Except in IE/Edge, where it looks like this:
Trees with color glitches:
The weirdest part is that this issue does not affect any other divs with similarly configured background images like the train tracks or the mountains... I have search a lot on this and couldn't seem to find an answer anywhere. I also tried to convert the image from png to gif and I got the same result. How would I fix this for IE/Edge compatibility?
Here is a codepen reproducing the problem in Edge: https://codepen.io/darthmooguy/pen/gmNWwg
I was having the same issue as you, and whilst this doesn't resolve the cause of the issue, I've found that adding transparent padding to the edges of your image and increasing the background size is a usable workaround in many cases.
https://codepen.io/anon/pen/BRwxbR
Adding the following scaled my background, so set it to an appropriate level.
background-size: auto 250%;
background-position: center center;
Please ignore the colour change - I was also wondering if a specific colour triggered it based on your initial problem, but it did not.
I might look at this further as my workaround here does not actually solve my issue. :)
here is the tree image (png) saved from Irfanview (save with transparency, no compression)...I'm not sure if Irfanview has stripped the Adobe meta data though.
as you can see... the colors and transparency color is completely different from the adobe authored source.
This page renders correctly in every other common browser except Safari. (Yes, it's a mess, I haven't finished the site yet) Safari quickly displays certain elements, then replaces them with white. In particular background images (or colors) in the body tag and , also text in a paragraph tag.
http://sr.hi-speedinter.net/staging/
Yet similar code works on the homepage http://sr.hi-speedinter.net where the body background image displays correctly.
I'm baffled! I've searched for about 2 hours and tried lots of tweaks but nothing has had any effect.
Here's some of the CSS
body.src-sub-page {
background: url("http://sr.hi-speedinter.net/wp-content/themes/twentyfourteen-child/images/sub_page_bg_tile.jpg");
background-color: #edeff3;
background-position: top;
background-repeat: repeat-x;
}
.src-sub-page .site-main {
background-image: url("http://sr.hi-speedinter.net/wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png");
background-position: top center;
background-repeat: no-repeat;
}
Any ideas where I'm going wrong?
Did you search for Safari bugs? And what happens if you disbale the rest of the CSS?
Is JPG and PNG not working?
Did you try background instead of background-color?
Did you try it on another PC?
Also try to change these
http://sr.hi-speedinter.net/wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png"
to
wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png
Thanks Gintoki, I had actually tried most of those, but the real problem turned out to be Safari for PC. I found someone nearby with Safari on a MAC and the page worked perfectly.
But for anyone else having similar issues, I highly recommend trying those steps above. Good to have it in one list!
I'm really stressed about this, it's all of a sudden started to happen. It's a WordPress site, so excuse the logo of the site not working and so on... this is just one page saved as HTML.
Link: http://bit.ly/1n7maKZ
For some reason, if I leave a page open for a certain amount of time, or click on a link and then go back to it, the backup background color will kick in suddenly and the background image will disappear! I have no idea why. I'm using Chrome.
My code in the header looks like this:
<div id="background" class="background-size grayscale bg"></div>
Here is the CSS:
#background {
background: url("[WORKING LINK HERE]") no-repeat center center fixed #e1e1e1;
background-size: cover;
}
And...
.bg , #supersized {
top:0;
width:100%;
height:100%;
position:fixed;
z-index:-20;
}
Is there a way to prevent this? The annoying thing is, you probably won't get to see the issue because I have no idea what triggers it to suddenly drop the background image and resort to the alternate color. If I have a page open long enough in Chrome at least, it does it. Thank you for any help!
Your "WORKING LINK HERE" is not working at all. I tried to load the background.png file, but it doesn't exist and, after a while, the server gives you back the website's homepage.
Probably you sometime see the background because it is cached in your browser.
Fix the path/filename of you background image in your css and it will work.