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.
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 have a simple html page with an image gallery. Sometimes not all the images will load. To me it seems to be random, never the same images. When the images do not load I refresh the page and they load instantly, it is usually only one or two images per page. Here is the website link.
http://www.kayleighwhite.org/engagements-sweethearts-017#gallery
This is the html for the images
<div class="gallery_one" style="background-image: url(images/portfolio/engagements-sweethearts/0168.JPG); background-repeat:no-repeat; background-position:center;">
<img src="images/portfolio/portfolio.gif" width="960" height="639" class="gal" alt="gallery">
</div>
The css
.gallery_one {
margin-left:auto;
margin-right:auto;
}
.gal {
display:block;
margin-left:auto;
margin-right:auto;
}
The image not loading is the background image. The portfolio.gif is just a transparent image that is layered over the top. Like I said though this is just random.
I'm not saying that 0168.JPG is not loading, cause tonight it is. But if you just keep clicking the "next" link eventually there will be a page that does not load all the images. I know that this is hard to determine the cause, but does anyone see anything wrong with this html or css that could cause this problem? Or any knowledge of such problems?
By the way I tested this on firefox and chrome on two different computers, both running windows 7. Same random results.
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 new to html, and the top image in this site seems to come from nowhere. By inspecting the source I find an with a link to the home page and a <span>Fragments of light</span> but there is no img. What am I missing? Thanks!
The parent div #title has the image as a background image.
<style type="text/css">
#title {
background: url(http://colleenbriggs.files.wordpress.com/2012/12/cropped-fragments-of-light-low-res.jpg) no-repeat;
height: 180px;
}
</style>
The image is in css.
#title {
background: url("https://colleenbriggs.files.wordpress.com/2012/12/cropped-fragments-of-light-low-res.jpg") no-repeat scroll 0 0 transparent;
height: 180px;
}
I would recommend you to use FireBug plugin for Firefox or Developer Tools for chrome for finding out what you need about the markup on the page. Even IE has developer tool for that.
To use such tool you just need to hover the element on the page that you need, right click on it and select "Inspect Element" in the context menu. After that the FireBug/Developer Tools will appear at the bottom side of the browser and there on the left you will see all markup which is rendered right now and the element that you are inspecting will be selected. On the right you will be able to see all css and other properties of selected element. In these css you will see the backgroud image url. You will be able to change something there and immediately see the result of change on the page.
Using such tool is much easier and better than just inspecting the source code because the HTML can be changed after page load by javascript and you will not see these changes in the source code of the page but you will be able to see everything in the Firebug/Developer tools.
Check them out. They are Number 1 tools for Web Developer.
And I agree with previous answers. The image is on the backgroud in css. You just need to know the way to see it by yourself. Not just know from internet =).
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.