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.
Related
I have a simple html page (in IIS) in which I display the image. The image (image source) is overwritten every minute. In the html page I have done that the page refreshes every minute to load the newer image.
I thought everything was working well for me and as it should. But I found out that about once a day I get stuck rendering an image - I mean that I only see half of that image in an HTML page at a time. When I open the image normally, it is complete.
I can't figure out what this might cause, can you advise me?
I have an api (https://api.daihan.top/api/acg) for Random images. I use it for a website background image in css file.I want use F5 to fresh website to have a new background image.
But, in my code, use refresh it doesn't work.Use refresh it is still the old picture.Unless I close the entire webpage and reopen it, it can get a new background image.
And this is my css code:
.mask {
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-image: url('https://api.daihan.top/api/acg');
}
I want to use refresh to have new background image, what should I do.
NEW UPDATE:
I found that when in my computer Local environment, I can use refresh o update image. But when I deploy it in github pages, refresh doesn't work.
It's probably caching the API. You could add a request parameter that adds a random number on every refresh, if you apply the style directly on the div, assuming you are using JavaScript. That way GitHub would think you are loading a different API every time and not cache.
Below is an example of how to do that in ReactJS.
style={{backgroundImage: `url('https://api.daihan.top/api/acg'?${Math.floor(Math.random() * 1000)})`}}
Thanks #Authentic-Science solution, I add a random number on css link in html head file and did solve the problem.
This is my new code:
<link rel="stylesheet" id="link" href="./source/main.css">
<script type="text/javascript">
document.getElementById("link").href="./source/main.css?random=" + Math.random();
</script>
In Github pages, when I refresh, it can change the background image.
P.S. I didn't change my css file.
I have a ruby on rails application. When clicking on a link which leads to a different page, where no background is set for the body element, the background does not change. It does however if you reload the new page.
I tried overwriting the background image on the new page which the link leads to, but that didn't help either.
All Code can be found here but the links I am talking about are for example Inhaltsverzeichnis github. The CSS I am talking about is
body {
background-image: url(<%= asset_path 'background.jpg' %>);
background-position: center;
background-size: cover;
}
in the corresponding view. It isn't included in the DOM if you click on the link, but is still is shown in browser.
The current master branch is also deployed here.
If you go onto that page and click on "Inhaltsverzeichnis" in the Navbar in the top left of the page you go to a new page and the background image stays. If you now reload the page the background image will vanish and the site looks like it should.
Can someone explain me what I am doing wrong? It looks to me as if the site somehow gets cached incorrectly or something.
Also, the problem only occurs if you click on the links within the page, if you type the url yourself, the page loads correctly in the first place.
Thank you in advance for any help :)
I found out what the problem is.
Rails by default bundles turbolinks, which does not reload the <head> of a new page if you click a link, to make loading pages faster. So as I put my style tags within the <head> of the page, these attributes didn't change until you reloaded the page. The quick fix was to remove turbolinks, but in the long run I will probably try to reintroduce it but then properly configure my page to use it to my advantage.
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.
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.