Why isn't my background image appearing on the screen?

I'm experiencing an issue with my background image not displaying properly. I am currently using bootstrap 5 and have tried several solutions without success. How can I resolve this problem?

html {
  background: url(https://via.placeholder.com/150/0000FF/808080) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="estilo.css">
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | Base Apparel coming soon page</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d2c9d6c9d4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>
  <div class="row">
    <div class="col-sm-6"><img src="https://via.placeholder.com/150/FF0000/808080" class="img-fluid"></div>
    <div class="col-sm-6">50%</div>
  </div>



  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb1aeb3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

htmlcssbootstrap-4

Answer №1

To set a background image, you can utilize the <body> tag:

body { 
        background: url(https://via.placeholder.com/150/0000FF/808080) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }

Alternatively, the background image will appear after your content.

For a demonstration, check out this example.

Answer №2

Consider placing your background image within the <body> element instead of the <html> element to ensure

body { 
       background: url(./images/bg-pattern-desktop.svg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
     }

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

Centering bootstrap columns in a WordPress template

I am facing an issue with aligning columns in a bootstrap section within a Wordpress template that I am working on. The problem is that the columns on the second line of the row are not centered. Currently, the layout displays 4 columns in the top row and ...

htmlcssbootstrap-4

Swap a jQuery class with another if the class for ul li is currently active

I am currently developing a form builder and I would like to customize the appearance, specifically changing the color of the text. I want the text to be white when the class is set to active, and black when the class is not active. Is there a way to achi ...

javascriptjquerycss

There seems to be a glitch with the Flask flash messaging feature, as

My Flask application includes login and register routes where I aim to display flash messages when username passwords are not matched. Specifically, this issue arises in my index and login routes: @app.route('/') @login_required def index(): ...

pythonhtmlflaskwebflash-message

Whenever I click the left mouse button, the website crashes

Why does clicking the left mouse button make the website scroll down? Any ideas for a solution? Check out the link here: I've tried everything since I just started working on my website. Be prepared to be shocked when you see the source code HAHAHHA ...

pythonhtmlcss

The issue of why padding left is not functioning correctly in Bootstrap version 5.3.1

</head> <body> <header class="bg-info "> <div class="container"> <div class="row text-white"> <div class="col-md-6 p-3 pl-6 "> ...

javascripthtmlcssbootstrap-5bootstrap-tags-input

How can I align text to the bottom right and left corners at the same time?

Is there a way to align text so that it appears in both the bottom right and bottom left corners of the page, functioning as a footer? For example: JANUARY (bottom left corner) / 2019 (bottom right corner) If anyone knows how to achieve this using HTML ...

htmlcsssticky-footertext-alignment

The button must be programmed to remove a specific item from the server

I am currently developing an application to monitor my expenses using javascript, nodejs, express, and handlebars as the templating engine. Within the app, I have a "list" div that displays all of my expenses. (There is an add button next to the list, not ...

javascripthtmlnode.jsexpressexpress-handlebars

Angular: Unable to retrieve defined data when loading a component

There is a nagging question in my mind that I hesitate to ask because deep down, I know the answer is probably staring me in the face. After struggling with code for two days straight, I am on the brink of pulling my hair out. Although I am relatively new ...

htmljsonangulartypescriptangular6

Issue with the height of sections in the active menu

While the set-up below is functional for content within section height limits, it fails when exceeding the limit causing overflow. Adding "display: table" or "overflow: hidden" to fix the overflow issue affects the menu's active state behavior. Sett ...

javascriptjqueryhtmlcss

I desire a three-column layout where the middle column will expand in width if columns 1 and 3 are vacant

I have a three-column layout designed without using tables. <div id="main"> <div id="left"></div> <div id="content"></div> <div id="right"></div> </div> This is the CSS code: #left {width: 200px;fl ...

asp.netjqueryhtmlcss

The element within the flexbox does not extend across the entire width, despite being designated as 100% full width

I'm currently attempting to center certain elements to ensure they are visually aligned. The upper div seems to have some odd space on the right, causing all the content within that div to be shifted and not accurately centered. On the other hand, th ...

htmlcssflexboxbootstrap-5

Jquery unresponsive in AJAX form output presentation

I recently delved into the world of jquery and AJAX, and while I grasp most concepts, I'm struggling with a small code snippet. On my webpage, there is a summary of articles. Clicking on an article name triggers a popup window with detailed informati ...

javascriptphpjqueryhtmlajax

How to save HTML content in a variable for future use in Next.js

When working with Next JS, my code resembles something like this: function Test() { return ( <section> <div>Test</div> </section> ); } Now, imagine that I want to have multiple entries here, gen ...

javascripthtmlnext.js

The incorporation of zoom disrupts the smooth scrolling capability of the menu

My landing page has a menu that scrolls users to the selected section. However, my client prefers the page at a 90% zoom level. To accommodate this request, I added the following line of code: body { zoom:90%; } Unfortunately, when I click on a menu o ...

javascriptjqueryhtmlcss

React code displaying misalignment between label and input

Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...

javascriptcssreactjs

How come my ejs files are all affected by the same stylesheet?

Currently, I am in the process of developing a nodeJS application utilizing Express, MongoDB, and EJS template view engine. The server.js file has been successfully created to establish the server. In addition, a separate header.ejs file has been implement ...

htmlcssnode.jsexpressejs

Manipulating images separately using the canvas

Currently, I am utilizing an HTML5 canvas to generate a collection of trees alongside their corresponding shadows. My objective is to ensure that each shadow corresponds with the position of a designated light source. While I have successfully drawn each t ...

javascripthtmlcanvas

When using Material UI TextField with input type "date", the event.target.value does not seem to be accessible

I am currently working with Material UI and React Grid from DevExtreme to build a table that includes an input field of type date. However, when I attempt to enter the date, it does not register the change in value until I reach the year field, at which po ...

javascripthtmlreactjsmaterial-ui

JQuery submitting a partial view form displays an empty page along with a JSON response

I am working on an Edit function in MVC4 public ActionResult Edit(UserGroup usergroup) { usergroup.created_date = DateTime.Now; usergroup.modified_date = DateTime.Now; db.Entry(usergroup).State = EntityState.Mod ...

javascriptjqueryhtmlasp.net-mvc-4

Creating a looping animation on multiple elements using jQuery that makes them fade in and out at different intervals

I am currently working on creating a fade in and out animation for multiple elements using jquery. It's a bit complex to explain, so I will start by sharing the relevant code. $(document).ready(function() { $("#1").delay(0).animate({ ...

javascriptjqueryhtmlcss