CODEWITHSUNDEEP
htmlcss
Nick
Nick

Reputation: 55

How come some background images don't work for me in HTML?

I've been wondering as to why some background images won't load for me when I assign them in my code. I could be possibly writing something wrong, but I feel like I've tried about every way to implement a background image into my sight and nothing has worked from the website I am trying to reference. I'm trying to use images from unsplash.com Here is my current CSS to try and get a background image in:

html {
background-image: url(https://unsplash.com/search/peacock?photo=lssS7acGDls);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Upvotes: 0

Views: 227

Answers (4)

Sphinx117
Sphinx117

Reputation: 97

Your link looks wrong. Go to the image, right click, and choose copy image link. And use quotes " " for the background-image URL() identifier.

background-image: url("http://www.exemple.xyz/bck.png");

Upvotes: 2

Omid Farvid
Omid Farvid

Reputation: 831

use this as image Url for background

https://images.unsplash.com/photo-1454551434781-2e5c58959f85?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=

Upvotes: 0

Alexandr Belov
Alexandr Belov

Reputation: 1834

Check the path of your url. Working example below.

background-image: url(http://www.alternativenation.net/wp-content/uploads/2016/04/nirvana93.jpg);
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

Working JSBin

Upvotes: 0

ab29007
ab29007

Reputation: 7756

The url you applied is not valid. It does not have the image. The url you are applying is a html page. right click on it and click view background image to go to the image.

html{
  background-image: url('https://images.unsplash.com/photo-1454551434781-2e5c58959f85?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Upvotes: 2

Related Questions