How to include png as backgound image without downloading anything else than HTML? - html

I am generating one html file. The file should display 3 divs. Each div will have:
background-image: url("something.png");
Now, when user will download the file (e.g. chooses "save page as"), he will only get the HTML - without the actual png file.
How can I make sure that he is able to see them, without making him download them?
I've tried converting to SVG, but this pictures have multiple colors, and it totally failed.

You could just make it data-based, i.e.
background:url(data:image/png;base64,base64-encoded-image-goes-here)
It is possible to have jpg, gif, etc.
You can get the base64 image by using an image-to-base64 converter.

Related

Why sometimes githubusercontent makes image links into markdown format, not html?

I usually add my image on github blog by copying the locally saved image into
github code editor.
Then it makes a image's link, it usually saved into form of HTML.
but sometimes it makes MD(markdown) format, not HTML.
What is the condition of image link creation?
I want to know what determines the format of the image's link
I made 2 different images, and copied them into same github code editor.
then it returns 2 different image link, but the formats are different, too.
enter image description here

Does it matter how the background image is chosen in a folder?

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.

add html to an image file

I want to be able to add html links to image files, jpeg, gif, png, bmp, etc.
I've seen image maps are old and you could add more than one html link to the image, but I can't see a way of doing it so that if I upload an image to my social media (for example) all I am doing is uploading an image, say it's called selfie.jpg.
The selfie.jpg file's metadata contains the html links within it, kind of like steganography hides messages within the data, except I don't need it to be encrypted or anything, it's just so I can post an image with more than one html link to nay social media account and all the links work, etc.
Any ideas?
None of the formats you list provide any mechanism for embedding hyperlinks.
If you want to provide any kind of not-completely-trivial document, then use a hosting service designed for that type of content.

Using inline css to display data URI images in IE8 or lower

I'm trying to display base64 encoded images as explained in this link.
My question is, instead of using url's for css,
*background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
I want to display them without providing any url's. By url, I mean "http://phpied.com/mhtml.css", it looks like I need to create a CSS file for base64 images.
Can anyone tell me how we can display image in IE8 or less without creating a new CSS file?

Open source program that can reference a converted image to the html

I would like to know if there is a program that can reference a converted image file to the actual html?
What I mean is that normally when you save a html page, there will be image saved in the folder together with the html. Suppose that I need to convert the image to some other type (example from gif to jpg), then the actual html saved that contains that image will be lost since the image has been converted. I wanted to view the same html page with the image converted and the html page will still display the same image. As such, back to the question, i wonder if such program exists?
I have tried to google it but I have found no such program exists.
What's wrong with just changing the relevant src attribute in the html file?