I'm wondering if it matters when you save an image in a folder, like when you right click on an image, Do you choose:"Save link as" or "save image as" as I have tried both but for some reason I cannot display the image as my background for a website. Is there anything wrong with the code that I did? Every time I drag the URL into a new tab or browser I only get 6 bullet points on a blank page.
I mainly used an external CSS sheet, then decided to try to fix it by using an internal sheet on HTML, and since that did not work, instead I tried to implement it in the body tag rather than the header tag but nothing worked. Would I have to use the tag? But how else will I be able to implement a background?
file:///Users/kevinnguyen/Desktop/Screen%20Shot%202019-01-26%20at%2011.09.11%20PM.png
The one above is the HTML file.
file:///Users/kevinnguyen/Desktop/Screen%20Shot%202019-01-26%20at%2011.12.19%20PM.png
this is the external file of CSS.
I'm a new to programming as I self taught myself the basics, yet I want to learn so much of it, it's thrilling.
Your links to the images don't work because they point to files on your computer. You need to upload them somewhere and put the link here to be able to see them. Anyway, if you have background-image:url("6928140-swiss-alps.jpg") your image should be in the same folder as the css file. And it should be called 6928140-swiss-alps with the .jpg extension at the end.
Related
Imagine this situation: I am making a website for a Minecraft server, and I forget to make a logo for the site, or I would like to just create it later. I want to keep the file name and HTML code all the same so it works when i finally change the logo. I do not want to save the file as a placeholder file due to caching issues, and I want to create an automatic placeholder image.
Example: I want to load this image:
images/funworldicon.png. But there is a problem, it does not exist at the moment! I do not want anyone's cache to save a placeholder version of the icon incase it exists again, so I want to set the file to a different image (like a placeholder) whenever the main image has an error while loading.
What is the solution to this situation?
I'm not sure what you mean exactly by not uploading the entire HTML file again. You'll end up replacing the HTML file anytime you make updates to the page. If you wanted to point to a dead link and have it fail back to a placeholder image you could do something like this:
<img src="images/funworldicon.png" onerror="this.src='images/placeholder.png'">
Which will use Javascript's onerror to replace the source of the image to the placeholder if funworldicon.png fails to load.
Live Example:
<img src="images/funworldicon.png" onerror="this.src='https://moundspet.com/wp-content/uploads/2017/03/Placeholder-1.png'">
I know I can add images to a html file by the following syntax
<img src="*****">
But my question is can i copy any images link from the web and add them to my html file?
i'm not talking about the copyright laws regarding this, just, can every image link be used as the image source in html?
I was writing a code in codepen where i embedded a link to an image from devianart, but the image didn't show up.
I think it depends to the website policy; Some websites don't let you to use their hosted images in your webpage, and some others do.
this is what i find on W3schools:
Definition and Usage:
The required src attribute specifies the URL of the image.
Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
The URL of the image.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like
src="image.gif")
Hope this is helpful :)
make sure image fully open in your browser tab/
i also check it but it work in codepen may be you doing something wrong first need to write clear what you want
try this image tag in codepen
I'm trying to determine where in my set of JavaScript files would I edit to make the urls of my site stop being appended with a "#home" to every portion of the site, or specific pages. I thought it was in the "deeplinking:" value of Pretty Photo, but then I realized that wouldn't make sense for that js to manipulate a URL in a normal page (a gallery, yes, and I have another site where that DID stop giving URLs to images in the Pretty Photo gallery, but not for regular page content). I cannot seem to locate it in the fw_scripts.js - which controls the majority of the site. I also tried to inspect element in FF to see what event handlers might be on the HTML tag, but to no avail.
Where would I find the javascript to edit to make the url's of any index.html file in a specific folder STOP appending a #home tag?
See what I mean here http://clients.runningh20.com/mf
Many thanks in advance.
first time poster and html noob here.
For a few hours now ive been trying to use a background picture. I downloaded an image I wanted to use, and set about trying to code it.
No matter what I tried, the image would not display. However, when I tried one of the other images I was using, it displayed just fine.
I tried using just the first letter of the existing image, and the program immediately suggested the image in a dropdown, as well as several other images with names starting with the same letter. However when I tried to use the new images first letter, it did list options, but none of them were the image I had downloaded.
I tried renaming the image, but still no luck.
I havnt included any code just yet, since this seems to not be related to the code itself (Since other images display just fine). Has anyone run into something like this before? Extensive google searches did not yeild anything for me.
In case it matters, I am specifying the background image as part of the Body css.
Thanks in advance for any help.
Please check to ensure your preferred image is located in the same parent folder as your htlm.
As #Patrick Falvey says but if the picture is not in the same folder remeber to / before your file path :)
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.