my CSS background image is not displaying

Question

I have uploaded the file in my git repository and copied the link and pasted here. Is there any certain method?

html{
  background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg");
}

Yogendra Chauhan · Accepted Answer · 2020-08-04 10:57:00Z

2

You need to use this raw image URL raw_background_img_src as the URL you are using will not work. See working example below:

body { 
    background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg?raw=true");
}

<html>
</html>

answered Aug 4, 2020 at 10:57

Yogendra Chauhan

8255 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vindhya Over a year ago

body{ background-image: url("google.com/imgres?imgurl=https://img.freepik.com/free-vector/…); } I have tried this , taking image from google.. it is not displaying. Actually I'm new to this so I've been exploring a lot.

Yogendra Chauhan Over a year ago

@Vindhya this is the image URL img.freepik.com/free-vector/…, If you add exactly what you want then i can solve your problem.

Ciprian Stoica · Accepted Answer · 2020-08-04 11:08:45Z

The url that you used (https://github.com/vindhya97/images/blob/master/pinkbackground.jpg) returns a HTML page containing (among other info) the target image itself. Just visit the URL and see. I know it might look a little bit strange at first sight but this is how GitHub works. So, because the url doesn't actually serve the image, you can't see the image rendered on your background.

If you want to get the image itself and not the HTML page, you must access the "raw" URL for the image which is: https://raw.githubusercontent.com/vindhya97/images/master/pinkbackground.jpg Just use this URL instead of the original one.

But be careful with this approach of embedding images in web pages. Now your repository is public. But if you deploy the webapp on some server and then you make your repository private, most probably the users that access the webapp won't see the image.

Nothehi · Accepted Answer · 2020-08-04 10:58:27Z

1

You copied the page link, you should copy the image link:

page link (it's wrong): https://github.com/vindhya97/images/blob/master/pinkbackground.jpg

image link (it's true): https://github.com/vindhya97/images/blob/master/pinkbackground.jpg?raw=true

or

https://raw.githubusercontent.com/vindhya97/images/master/pinkbackground.jpg

answered Aug 4, 2020 at 10:58

Nothehi

7238 silver badges22 bronze badges

Comments

rostegg · Accepted Answer · 2020-08-04 10:59:26Z

1

You just should use raw link to image:

body {
    width: 100%;
    height: 100%;
    background-image: url("https://raw.githubusercontent.com/vindhya97/images/master/pinkbackground.jpg");
}

answered Aug 4, 2020 at 10:59

rostegg

8810 bronze badges

Collectives™ on Stack Overflow

my CSS background image is not displaying

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related