CODEWITHSUNDEEP
htmlcss
Vindhya
Vindhya

Reputation: 35

my CSS background image is not displaying

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");
}

Upvotes: 2

Views: 82

Answers (4)

Ciprian Stoica
Ciprian Stoica

Reputation: 2439

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.

Upvotes: 1

rostegg
rostegg

Reputation: 88

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");
}

Upvotes: 1

Nothehi
Nothehi

Reputation: 703

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

Upvotes: 1

Yogendra Chauhan
Yogendra Chauhan

Reputation: 825

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>

Upvotes: 2

Related Questions