I am making this page http://pagota.herobo.com with the JavaScript library called curtain JS. When you scroll down the page on #section4 where it says delivery& prices you can't see the picture proberly but the content of section 5.
The site I have it hosted on 000webhost. The problem only happens on their server and not locally on my machine.
Anyone could help me on this. The CSS I am using for displaying the pic is background:url(../img/prices.png)50% 0 no-repeat, url(../img/bg.png)50% 0 repeat;
The first picture(prices.png) has a transparent background and the second one is a pic with background of a grey color.
If you go to http://pagota.herobo.com/img/, you can see that your file is not called bg.png, but rather bg.PNG.
I suppose you're working on Windows. Windows file names are case-insensitive. That's why the image is showing on your machine, but not on the server. Either change the filename to bg.png or change the name in the CSS to bg.PNG and it should work.
Related
I tried lots of different ways and nothing is showing up, I never use Brackets environment and I'm facing this issue. I added my URL image background but it isn't showing up. Does anyone have an idea?
Maybe the url is wrong, you are in the folder image so you just have to write it like this :
background-image: liner-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6), url(sawirl.jpg))
In one of my websites, I am using css background-image property to set the background for different sections. All the sections load their background images properly except for the contact section.
When I try to inspect it, the inspector shows that the background image could not be loaded in the tool tip. But when I try to open the image in a new tab, I can see the image perfectly, After I do this, when I do a refresh of the page, I am able to see the background image for that section correctly now. I inspected the Network tab and don't even find the image file being called. However, after opening the image in a new tab and then inspecting the network tab shows the image.
Error when I inspect before trying to open the image in a new tab:
My site can be viewed here. The error happens in the Contact Section and can be viewed here
Please help me with this strange error.
Because you are getting this error in console:
The HTTP 409 Conflict response status code indicates a request conflict with current state of the server
Your Image Path:
The alternative and generally better option is to use a path that's relative to your domain, You should pass your image:
Please see this post:
background images path not working in CSS
i have a problem while designing my web page in asp.net MVC5.
i'm designing my login and registration page through a file called style.css.
in the begining i put a background image for testing and kept working with the same for few days.now when i'm putting my desired image in its Images file and trying to load it first time of running app its working but when refresh it go to other page it's not being load but the image i worked on previously is appearing even that picture i already deleted from my project plus i checked each and every code its not being called from anywhere.i tried every possible way now looking for help her. For further detail i'm providing the code.
style.css
body {
background:pink ;
background-size: cover;
width:auto;
text-align:center;
}
after refreshing page the background changes from pink to the previous background.
I have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.
I'm creating a web site and the site consists of a few images. Locally, everything displays correctly, but when I upload it to my server, some of the images are not displayed. None of the GIFs / Animated GIFs are displayed at all and some of the jpeg images are not displayed (while others are OK). The only images which don't appear to be effected are PNG, which display OK.
If I check FireBug and hover over the image link, I receive the message Failed to load given URL.
If I enter a direct URL link to the image on the server, the image is downloaded so it's definitely there.
Here's my CSS:
body {
background-color: #000;
background-repeat:no-repeat;
background-position:top;
background-image:url(../images/background2.gif);
}
I created another web site using the same code, but with a different background.gif image and everything displays correctly, so I'm not sure what else is different?
Also, I have tried deleting the images from the server and re-adding them, but still no luck.
Try putting in the full path in the url:
e.g. background-image:url(http://www.your-site.com/images/background2.gif)
-if that works, then check your paths and make sure the css url matches your directory structure.
Instead of using:
background-image:url("../images/background2.gif");
Use:
background-image:url("/images/background2.gif");
Starting with "/" moves to the root directory and starts there
Starting with "../" moves one directory back and starts there
(also it's a good practice to always include quotes on paths)
Thanks for everyone's help, its turns out that this was a problem with some sort of bandwidth restriction on my work internet. If I viewed the site from anywhere else the images were all loaded..... I really though I was going mad for a while! Thanks again.