How to add a background image in CSS with HTML's help

I am a beginner learning HTML and CSS, attempting to incorporate a Full Screen Background Image using CSS. Unfortunately, the code I have written is not working as expected despite following various tutorials. Below is my code:

HTML file

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">
<h1>Welcome to my First CSS page.</h1>
</body>
</html>

and CSS file

body{
    background-image: url(""C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg"");
    background-size: cover;
    background-attachment: fixed;
}

Answer №1

You may encounter an issue with the double-quotes in your URL - it is recommended to remove them. Instead, consider using a relative path to access images within your project directory.

Answer №2

Check out this example to see where you went wrong and what could be improved: - You used too many double quotes for your background URL - It's better practice to place the CSS link in the head section, but if you must put it in the body, do so at the end.

body{
  background-image: url("C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg");
  background-size: cover;
  background-attachment: fixed;

  /* DEMO, remove */ background-image: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg");
  /* DEMO, remove */ color: #fff;
}
<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <!-- comment out -->
    <!--<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">-->
</head>
<body>
    
<h1>Welcome to my First CSS page.</h1>
</body>
</html>

Answer №3

style="background-image: url('img_unique.jpg'); height: 100%; background-position: center; background-repeat: no-repeat;background-size: cover;"

Give this a shot in the designated tag or body for the image placement. But remember to search on Google before implementing.

Answer №4

To properly set up your CSS styling, make sure to move your CSS file to the main folder where your HTML file is located. Create a div element that will act as a container for your content, such as an h1 heading. When linking to images in your CSS, use relative paths like foldername/imagename.jpg instead of full URLs.

Here's how your directory structure should look:

  • -html.html
  • -practice.css
  • -imagefolder --image.jpg

Update your CSS link in your HTML file to:

<link rel="stylesheet" type="text/css" href="practice.css">

Next, create a div with a class inside the body tag:

<div class="body">
  <h1>Welcome to my First CSS page.</h1>
</div>

In your CSS file, style the body div with a background image:

.body{
  background-image: url(image/landscape.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 500px;
}

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

Having trouble with positioning divs on top of each other? Struggling to get position absolute to work correctly?

Currently, I am utilizing flexbox to construct a grid layout. However, I have hit a roadblock when attempting to make the divs stack on top of each other. The overflow:auto is hidden and position relative has been added to the carddiv. While the divs are s ...

How can PHP send a variety of error messages to an Ajax/Jquery script and display them in an HTML DIV?

In an attempt to send various error messages back to an HTML DIV based on the PHP outcome, I have scoured through different resources without a solution that fits my particular case. Hopefully, someone can provide assistance with this. The scenario involv ...

Adding a component dynamically with a link click in Angular: A step-by-step guide

I am encountering an issue with my web application setup. I have a navigation bar, a home page with left and right divs, and a view-associates component. My goal is to dynamically add the view-associates component into the home's right div when a spec ...

Passing request parameters through an HTML form in Spring MVC

Currently diving into Spring MVC and exploring web development. Here is a method from my Controller: @GetMapping("/deleteCar") public String deleteCar(@RequestParam("carId") int carid) { carService.deleteCar(carid); return "redirect:/car/cars"; } ...

JavaScript layout: Thymealf

I have a unique thymeleaf template like so: <body> <div id="layout"> <!-- Menu toggle --> <a href="#menu" id="menuLink" class="menu-link"> <!-- Hamburger icon --> <span>& ...

What is the best way to align a tweet in the middle of

When using Twitter to embed a tweet, the code provided is necessary. An example of this can be seen below: <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) & ...

Switch up the picture when you press on it

I have a task involving a table where I want to switch out an image in the <td> when it is clicked, using a URL that I specify beforehand. The URL of the image will be provided when clicking on a link within the page. For example: index.html?type=d ...

Words spilling onto the picture

The issue of the text col-xs-9 col-md-9 overlapping with the image col-xs-3 col-md-3 has been persistent. Even after attempting to add the img-responsive class to the img src, it continues to not work as expected. Interestingly, CSS was intentionally avoid ...

Updating the hyperlink of an html element using css

I am looking to update this A tag <a href="contact.html" >Contact</a> to <a href="tel:+13174562564" >Contact</a> using only CSS, if possible. Alternatively, like this <a href="tel:+13174562564" >+13174562564</a> ...

Looking to alter the CSS of an ID element when hovering over a link on your website?

Irrespective of the positioning of the links in the html, a simple hover effect can trigger changes like switching images or altering backgrounds anywhere on the website. The ideal solution would involve a straightforward method without the need for Javas ...

Reveal and conceal using CSS animations

I am working on adding animation effects to show and hide HTML elements triggered by a button click. The button toggles a "hide" class to display or hide the element. Check out my code snippet: const toggleButton = document.querySelector('button ...

An issue with excess whitespace appearing below the footer while adjusting the size of the webpage

I have a database table on my website that I am styling with the help of bootstrap. Check out this screenshot for the issue: https://i.sstatic.net/CUkjz.jpg For the HTML code, you can view it here: And for the relevant CSS, click on this link: I used pa ...

Issue with Google Adsense - adsbygoogle.push() error: Pages can only support one AdSense head tag. The additional tag will be disregarded

After adding my script tag to the navbar component, I encountered an error on my site during the next js build: Google Adsense error -adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored <Head> ...

Issues arise when trying to use the Jquery append() method in conjunction with Angular

We are currently utilizing jquery version 1.9.1 and angular version 1.2.13 for our project. Our wysiwyg editor is functioning well, as we are able to save HTML into the database and load it back using the jquery append function successfully. However, we ar ...

Javascript Dilemma: Unable to Access 'object.style.left' and 'object.style.top' Values - What's the Issue?

Why am I unable to access and modify the object.style.left & object.style.top values? I am currently attempting to dynamically reposition a button on a webpage. In order to set new values for the style.left & style.top, I can utilize JavaScript l ...

Revealing Transition Element on mouseover

My side-menu consists of icons that display text to the right upon hovering over them. I want the text to show up and the div to expand smoothly with a sliding transition, ideally without the need for additional JavaScript. Is there a way to achieve this? ...

Design an HTML button/label with text and a starting width of zero

I'm attempting to design HTML buttons and labels with text that initially have zero width. Once inserted, they should smoothly transition to a visible state. I've tried adjusting the initial width and min-width style properties without success. ...

Delivering seamless css integration using express.js

Lately, I've been struggling with serving CSS using Express.js. After some trial and error, I managed to make it work. However, I'm puzzled as to why my new code works while the old one doesn't. Here's the code that now works for me: co ...

Display the content within the preformatted tag

As a Python and Selenium novice, I am eager to extract the text within the pre tag of the provided snippet using Python Selenium. <body><pre style="word-wrap: break-word; white-space: pre-wrap;"> " Here is some sample text that I need to re ...

"Modify the MySQL database each time a user changes the value in a

As a student, I am looking to update value(s) whenever a student changes the value(s) in the correction or update form. So far, I have been able to retrieve and display values in text boxes based on the name selected from a dropdown list from the database ...