Comments on: background-image

By: David Spector

David Spector — Fri, 16 Apr 2021 16:32:51 +0000

“Setting a fallback color” doesn’t work for me. On refresh, it always flashes the color before displaying the image. Possibly a bug in Firefox and Chrome?

By: Josue

Josue — Sun, 15 Dec 2019 03:26:06 +0000

In reply to Linpi.

This is only an parameter, you can use any image type on background prop.
For example
background:url(https://cdn1.photostockeditor.com/c/1512/cup-green-teapot-pouring-red-liquid-to-white-teacup-closeup-photography-beverage-beverage-image.jpg)

By: Linpi

Linpi — Wed, 22 May 2019 09:25:29 +0000

in a css file I found this:
background-image: url(https://c.pxhere.com/photos/4f/ee/candy_toppings_sweet_colorful_sugar-883692.jpg!d);
what means !d at the end ?

By: Vedha Peri

Vedha Peri — Thu, 20 Dec 2018 18:25:23 +0000

Actually, it does work when you give the path of your picture inside url(). Make sure to give the correct path to the image. My image was stored in the same directory as my html, inside another folder called assets.

By: Geoff Graham

Geoff Graham — Mon, 12 Feb 2018 14:31:52 +0000

In reply to Ali Haider. Unfortunately, src() is not a part of the background-image syntax.

By: Ali Haider

Ali Haider — Mon, 12 Feb 2018 11:11:37 +0000

How to set back-ground image via source(src) rather than url?

By: Nirmit

Nirmit — Sun, 03 Sep 2017 19:32:57 +0000

hey i dont know how to give the path of the image in the url….can someone guide me?

By: luis

luis — Tue, 20 Dec 2016 16:45:42 +0000

solved (../image
the 2 points and the slash solves the problem!

By: luis

luis — Tue, 20 Dec 2016 16:21:41 +0000

i using the right path to insert background image in local site, but the image is not displaying, i dont know why, i tried everything it just doesn’t work

By: nitin maurya

nitin maurya — Tue, 30 Aug 2016 08:24:42 +0000

Excellent.
I love the background of this page.

By: Joshua

Joshua — Mon, 06 Jun 2016 22:46:12 +0000

how can i use an image saved on my pc as a background image.

By: Clay

Clay — Fri, 29 Apr 2016 17:38:23 +0000

In reply to Paul. Right click the background and select "inspect" / "inspect element" / etc. to see the code used to create something. In this case it looks like he used a base64 encoded svg:

background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8+CgkJCTxmZUNvbXBvc2l0ZSBpbjI9J3Jlc3VsdDUnIG9wZXJhdG9yPSdpbicgaW49J1NvdXJjZUdyYXBoaWMnIHJlc3VsdD0ncmVzdWx0NicgaWQ9J2ZlQ29tcG9zaXRlMzEyMScgLz4KCQkJPGZlTW9ycGhvbG9neSBpbj0ncmVzdWx0Nicgb3BlcmF0b3I9J2RpbGF0ZScgcmFkaXVzPScxMCcgcmVzdWx0PSdyZXN1bHQzJyBpZD0nZmVNb3JwaG9sb2d5MzEyMycgLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgZmlsbD0nI2VlZWVlZScvPiAgICAgCgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4PScwJyB5PScwJyBpZD0ncmVjdDI5ODUnIHN0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);

By: Paul

Paul — Tue, 22 Mar 2016 16:26:46 +0000

I love the background of this page. I’ll love to know what css code to use to create a similar effect…

By: Elmo

Elmo — Tue, 12 Jan 2016 18:11:10 +0000

can you tell me how to get to sesame street?

By: Angelo

Angelo — Wed, 02 Dec 2015 12:44:44 +0000

Excellent.

I am beginning with JEE and reading this article I improved much my knowledge.

Now I can better understand the mechanism how to program in this environment