What could be causing the absence of a background image in CSS?

When I try to view my local desktop file, the CSS background image isn't showing up. Here's the code I'm using:

<!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 blog allows members of our programming club to stay updated on our activities. Feel free to check out the code by pressing Ctrl-U! ~ Nathan Tran</p>
</body>
</html>

Here is 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 will choose the answer that provides the best solution, so please help me debug this code. Thank you for your assistance!

htmlcss

Answer №1

There are a couple of syntax errors:

  1. Make sure to put the link in quotes
  2. Remove the space between url and (

html {
background:url("http://example.com/image.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="style.css">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This website is dedicated to sharing information about coding and web development.</p>
</body>
</html>

Answer №2

It is not necessary to include the image URL below the quote.

The issue lies in the incorrect URL provided for the image. There is a space within the image URL that needs to be removed between Best- and Website

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to showcase an epub format book using only HTML5, CSS, and jQuery?

Can ePub format books be displayed in a web browser using only HTML5, CSS, and jQuery? I would appreciate any suggestions on how to accomplish this. Additionally, it needs to be responsive so that it can work on iPad. While I am aware of this requirement, ...

javascriptjqueryhtmlcssepub

Centering content within a <th> tag

Hey there, I'm currently facing an issue with aligning a div inside another one. To illustrate the problem, I've set up a small fiddle which you can check out here: https://jsfiddle.net/jpq7xzoz/ The challenge arises when using the jQuery table ...

jqueryhtmlcss

What is the method for incorporating a currency symbol into a jQuery mask?

I have successfully implemented the mask on the <td> element of the table, but now I would like to include the currency symbol before the value as shown in the example below. if ($(this).attr('title')==='Value') { $(+ ...

phpjqueryhtml

Include a new row in the form that contains textareas using PHP

I'm trying to add a new row to my form, but I'm facing challenges. When I click the add button, nothing happens. If I change the tag to , then I am able to add a row, but it looks messy and doesn't seem correct to me. Here is my JavaScript ...

javascriptphphtmlformsrow

What are the best practices for avoiding text wrapping around a DIV?

I have scoured this site extensively, searching for a solution to my problem. What I thought was a simple issue has left me frustrated after hours of trying to figure it out on my own. So, I've finally admitted defeat and turned to seek help... Here& ...

htmlcssword-wrap

Preload-webpack-plugin does not support pre-fetching files

I have a query about prefetching and preloading content. In my vue app, I noticed that after building, I have duplicate files loaded in my dist/index.html file. Here is an example: Additionally, the "scripts" are not being preloaded/prefetched as expec ...

javascripthtmlvue.jswebpackvue-cli

Button with Circular Design by Tailwind

Is there a way to place a circle inside a button with text positioned to the right of it without overlapping in a centered manner? Take a look at this playground HERE <button class="btn btn-change"> <span class="w-5 h-5 bg-red-5 ...

csstailwind-css

Tips for fading the text of list items when their checkbox is marked as done?

I am trying to figure out how to gray out a list item when its checkbox is checked. The code I currently have takes text input from a textbox and adds it to an unordered list when the add button is clicked. Each list item contains a checkbox within it. My ...

javascripthtmlcss

Error: The variable "deleted1" is not declared and cannot be used on the HTML button element's onclick

Hello, I need assistance from someone. I encountered an error message after trying to delete a row even though I have declared the button already. Error: deleted1 is not defined at HTMLButtonElement.onclick Could it be due to the script type being modul ...

javascripthtmlfirebasegoogle-cloud-firestore

Linking CSS to any page other than index.html will not be feasible

Hey everyone! I've run into a little problem that's driving me crazy, so I figured I'd reach out for some assistance. Here's the situation: In my file structure, I have a root file that includes index.html, /css/, /pages/, and /images/ ...

htmlcss

Issues with CSS Min-Height in Various Web Browsers

Lately, I've been working on a website and trying to create a border that surrounds all my content and extends the full length of the page. The #Container div is supposed to expand to fill the entire page. I've tried using min-height:100%; in my ...

htmlcss

Placing numbers at the top of the HTML table cell for better visibility

I am currently utilizing a two-column HTML table to showcase a list of rules. In one column, I have the rule's number, while in the other, I have the rule itself. However, I've noticed that the rule numbers are appearing near the bottom of their ...

css

Tips on applying a class to a host element using @hostbinding in Angular 2

I've been wanting to assign a class to the host element of my component, and initially I used the host property in this manner: @Component({ selector: 'left-bar', host: { 'class': 'left-bar' }, templateUrl: 'a ...

csstypescriptangular

Toggling a div updates the content of a different div

I am looking to make the content within <div class="tcw-content"> dynamically change when a different div is clicked. I have little experience with Ajax, so I'm wondering if there are alternative ways to accomplish this using JS/CSS. If anyone h ...

javascripthtmlcssajax

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

csssassvuejs2nuxt.jsantd

The Selenium driver's execute_script() function is not functioning as expected

When I attempt to execute a JavaScript using driver.execute_script, nothing happens and the system just moves on to the next line of Python code. Any ideas? I've been web scraping on a webpage, using JavaScript in the Console to extract data. The Jav ...

javascripthtmlseleniumselenium-webdriverweb-scraping

Is there a way to prevent certain words or letters from being exchanged in PHP?

In my PHP project, I am trying to replace text in one textarea and display it in another. While most of the code works fine, there are some parts that are causing issues. Currently, I am using the str_ireplace function with around 60 different words and m ...

phphtmlstr-replace

Eliminate error class in jQuery Validate once validation is successful

I'm having an issue with the jQuery Validate plugin. Even after a field is successfully validated, the "error-message box" continues to be displayed. How can I remove this box? Here's my code: CSS: .register-box .field .has-error{ border ...

javascriptjqueryhtmlcssjquery-validate

What is the best way to retrieve the information stored in an object?

let items = { 1001: {item: 'Chocolates', price: 10, quantity: 10}, 1002: {item: 'Biscuits', price: 10, quantity: 10}, 1003: {item: 'Bread', price: 20, quantity: 5}, 1004: {item: 'Milk', price: 25, quantity: 5}, 1005: ...

javascripthtml

Position a dynamic <div> in the center of the screen

My goal is to design a gallery page with a list of thumbnails, where clicking on a thumbnail will open the related image in a popup div showing its full size. The issue I'm facing is how to center the popup div on the screen, especially when each pic ...

javascriptjqueryhtmlcss