why is css background image not showing

Question

Why is the CSS background image not showing when I launch the file on my local desktop? Here is my code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" text="type/css" href="discovery.css">
<title>Programming Club Official Blog</title>
</head>
<body>
<h1>Programming Club Official Blog</h1>
<p>This is a blog that allows member of the programming club to keep in 
  touch about what we are doing in the club. Feel free to look at the code by pressing Ctrl-U! ~ Nathan Tran</p>
</body>
</html>

My CSS code:

html {
background:url (http://smashingyolo.com/wp-content/uploads/2014/05/Best- 
Website-Background-Images10.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
}

I promise to accept the answer that helps me the most so please debug the code for me. Thanks for helping!

Niles Tanner · Accepted Answer · 2016-10-19 04:50:15Z

1

There are some syntax errors:

Put the link in quotes
Remove the space between url and (

html {
background:url("http://smashingyolo.com/wp-content/uploads/2014/05/Best-Website-Background-Images10.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
}

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" text="type/css" href="discovery.css">
<title>Programming Club Official Blog</title>
</head>
<body>
<h1>Programming Club Official Blog</h1>
<p>This is a blog that allows member of the programming club to keep in 
  touch about what we are doing in the club. Feel free to look at the code by pressing Ctrl-U! ~ Nathan Tran</p>
</body>
</html>

answered Oct 19, 2016 at 4:50

Niles Tanner

4,0512 gold badges19 silver badges33 bronze badges

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

2 Comments

Nathan Tran Over a year ago

IT WORKED! I didn't know that removing a space made it work. I used a different text editor before and it still worked when I put the space. I guess the space isn't proper code... :(

Nathan Tran Over a year ago

Don't worry, I accepted your answer. If you think my question helped you learn, vote it up!

Krupal Patel · Accepted Answer · 2016-10-19 05:14:55Z

Is not required to add image URL under quote.

Problem is wrong URL. There is space in image URL. Remove space between Best- and Website

http://smashingyolo.com/wp-content/uploads/2014/05/Best-%20Website-Background-Images10.jpg

html {
background:url(http://smashingyolo.com/wp-content/uploads/2014/05/Best-Website-Background-Images10.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
}

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" text="type/css" href="discovery.css">
<title>Programming Club Official Blog</title>
</head>
<body>
<h1>Programming Club Official Blog</h1>
<p>This is a blog that allows member of the programming club to keep in 
  touch about what we are doing in the club. Feel free to look at the code by pressing Ctrl-U! ~ Nathan Tran</p>
</body>
</html>

Collectives™ on Stack Overflow

why is css background image not showing

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related