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

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I ...

Issue with ng-disabled not functioning properly for href tag within list item

Is there a way to prevent clicking on the <a> tag within a list item in a UI list so that the associated <div> is not displayed when clicked (excluding the last list item)? I have attempted using ng-disabled directly on the list item attribute ...

Steps for using the ModelName.objects.filter method in HTML

I'm looking to streamline the amount of code needed in my view and aiming to achieve this directly in my HTML file: {% for committee in c %} {% for article in Article.objects.filter(committee=committee) %} <a class="post-link" hre ...

Showing Information in an HTML Table

I am new to the world of PHP programming and constantly searching for solutions to my problems. If anyone has any ideas, please share them - I greatly appreciate any help in solving this issue. Within my database table, I have data structured as follows: ...

Make sure to keep the <div> element nested within the image

I'm working on creating a photo album that displays images in full screen and allows users to navigate using arrows. Check out my progress here: https://jsfiddle.net/q49wzey6/ Here's the HTML code I'm using: <div class="main"> &l ...

Can PhoneGap be used to create HTML5 applications from scratch?

Despite diligently searching through the PhoneGap website and their support group, I am still coming up empty-handed in my quest for an answer: My current project involves creating an application that functions as a pure HTML5 application, capable of runn ...

Setting an error state on the parent div of a checkbox

I am facing an issue with styling a standard HTML checkbox when it is in an error state. Since it's not possible to style the checkbox directly, I am attempting to apply the styling to its parent div instead. Consider this example: <div class="fo ...

What is the process for incorporating a personalized SVG file into the material-ui Icon Component?

For my project, I have a requirement to use custom svg files. To achieve this, I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0865697c6d7a616964257d61483b2631263b">[email protected]</a>. I reviewed ...

Is there a way to retrieve the list element that was added after the HTML was generated?

How can I reference a list element added using the append function in jQuery within my onclick function? See my code snippet below: $(function() { let $movies = $('#showList') let $m = $('#show') $.ajax({ method: 'GET ...

When attempting to utilize res.sendfile, an error arises indicating that the specified path is incorrect

I am facing an issue with my Express.js server and frontend pages. I have three HTML and JS files, and I want to access my homepage at localhost:3000 and then navigate to /register to render the register.html page. However, I am having trouble specifying t ...

Servlet-enhanced Turn-Based Gaming Experience

I am working on developing a turn-based game, similar to Checkers, using Servlets and JSP pages. I have set up a specific page with a newGame button that redirects players to the gamePage. This redirect sends one player to Black.jsp and the other to Red.js ...

HTML forms default values preset

I need help with pre-setting the values of a dropdown menu and text box in an HTML form for my iPhone app. When the user taps a button, it opens a webview and I want to preset the dropdown menu and text field. Can someone guide me on how to achieve this? ...

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

Exploring the ins and outs of utilizing pseudo selectors with material-ui

I've been attempting to accomplish a simple task. I wanted to toggle the visibility of my <TreeMenu/> component in material UI v1 using pseudo selectors, but for some reason it's not working. Here is the code: CSS: root: { ba ...

Bootstrap 3.2.0 Grid Column Creation Problem Identified

On my webpage using Bootstrap 3.2.0, I have a layout that includes dynamic column generation and content within those columns. However, I am facing an issue with this setup. Can anyone advise me on how to resolve it? Your help is greatly appreciated. ...

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

Tips for formatting list items to display quotes in a scrolling ticker

How to format the <li> element HTML: <div id="patTest" style="width: 95%; padding: 0; margin: 0; text-align: center;"> <ul id="patTestUL"> <li> <div style="padding: 0; margin: 0; width: 98%;" ...

Reordering Divs in Bootstrap 3 Specifically for Small Screens

Just getting started with my first responsive design project, and I'm wondering if it's possible to achieve something like this using Bootstrap 3. The goal is to switch from the current layout: https://i.stack.imgur.com/lABXp.jpg To https://i. ...

"Implementing a search bar feature using HTML, CSS, and

My attempt to implement a search bar CSS from CodePen is not working properly in React. Even though I used the exact code provided, the search bar seems to be buggy. If you want to take a look at the code sandbox for better reference, you can visit: https ...

Angular - developing a custom web element to enhance the project

Is there a way to convert a single module into a web component and integrate it within the same project? Specifically, I have 3 modules in my project and I am looking to transform only module1 into a web component and incorporate it seamlessly. Thank you! ...