Having trouble displaying the background image in a Bootstrap jumbotron

I have tried everything I could find in my research, but I still can't get the background image to show up on the jumbotron. Currently, I am attempting to use an image from the images folder without success, and even trying a link doesn't work. I have tested using div.jumbotron, renaming it, and removing other background properties, yet nothing seems to work.

As a beginner in bootstrap and HTML, I wonder if I am missing something or if I am making some mistake that I'm not aware of.

<head>
  <link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 
      crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
</head>

  <div class="jumbotron">
    <h1 class="display-4">Top Page</h1>
    <p class="lead">Simple Bootstrap template.</p>
  </div>

.jumbotron {
  background-image: url(https://unsplash.com/photos/kjERLXaHjXc);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }
htmlcssbootstrap-4

Answer №1

Please provide the correct URL for the image.

.jumbotron {
  background-image: url(https://example.com/image.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
</head>

<div class="jumbotron">
  <h1 class="display-4">Top Page</h1>
  <p class="lead">Simple Bootstrap template.</p>
</div>

Answer №2

Upon reviewing the provided link, it appears that there may have been an error in its input. The image linked below is likely the intended photo.

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

What is the best way to test out CSS effects before they go live

I enjoy customizing the CSS, like the posted dates on my portfolio How can I make these changes without affecting the public view of the website? One suggestion from a forum was to use .date {visibility:hidden;} ...

csswordpressdateweb

Display the AJAX reply within a designated div based on the selected value

I currently have two dropdown menus where the options in the second menu depend on what is selected in the first one. The behavior I want is for the second menu to update as soon as the user makes a selection in the first one, without needing to submit the ...

jqueryajaxhtmlstruts

What is the correct method to properly encode JSON that may include HTML when displaying it in an HTML file?

After searching through numerous questions, none seem to address this specific scenario. app.get('/', function(req, res) { res.set('Content-Type', 'text/html'); res.send(`<html> <body> Hello, World! </body&g ...

javascripthtmljson

The onload event for windows does not fire

I am currently working on a project that requires the use of tabbing control with flyingbox. To achieve this, I consulted the following link: After referring to the above link, I made some modifications to my project. I am retrieving details from another ...

javascriptjqueryasp.netcsstabs

How can I delete a date value from a td if it matches the current date value?

I'm facing an issue with duplicate date values in my table rows and trying to find a solution using JavaScript or JQuery. The problem cannot be fixed within the SQL query itself, so I need to explore alternative approaches. I want to remove repeated d ...

javascriptjqueryhtmlsql

The code will only detect the browser when accessed from a mobile device, and will display a

I've experimented with various methods to make this work. My website has a streaming radio player at the top of the page, usually using the default script provided: <center> <!--Wavestreaming.com SHOUTcast Flash Player--> <scri ...

jqueryhtmlbrowser-detection

Make sure to blur an editable p element using only vanilla JavaScript

Check out this code snippet: <p contenteditable>The most amazing p tag in the world of p tags</p> Here is the corresponding Javascript: var p = document.querySelector('p'); p.addEventListner('keypress', function (e) { ...

javascripthtmldom

Why does the Autofocus Attribute in HTML5 fail to work specifically in FireFox when <Form><input> elements are dynamically loaded using Ajax?

While testing the form that I loaded via ajax, I noticed an issue with autofocus on the "c_name" field in Firefox. When I access the form directly, the autofocus feature works as expected, but when loading it with ajax, it doesn't seem to work. Surpri ...

ajaxhtmlfirefoxautofocus

The div is identified by an ID and a class, but the class is not being utilized by the div

Can someone please explain why the font size, background color, and font weight are not applying to the content in the "welcome" class in this simple HTML/CSS code below? The DIV has both an ID and a class, yet the styles are not being reflected. Any insi ...

htmlcss

Choosing a dropdown option with a CSS Selector

Here is the code snippet I am currently working with: import org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.o ...

cssseleniumautomation

What is the reason for Sublime 3 highlighting all ID selectors in CSS with yellow?

A single image can convey a multitude of meanings: Sublime 3 (build3083) is highlighting the #something selector as a yellow warning, while .classtag appears to be fine. I don't usually work with CSS, so this issue is quite bothersome. How can I r ...

csssublimetextsublimetext3

The functionality of redirecting to the homepage after registration is not working as intended due to the issue of the uiD not being properly set in the session

I have created a registration form to register users and once the registration is complete, it should redirect to index.html (home page). There seems to be an issue where upon pressing the submit button, the page refreshes and the form resets without redi ...

phphtmlmysqlpdo

Can CSS animation graphics slow down the speed and performance of your website?

Recently, I decided to dabble in web designing and incorporated CSS animations into my page. However, I encountered some issues with the design - particularly, the navigation bar is not functioning properly when scrolled. Moreover, the website seems to b ...

cssperformanceanimationload

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

I need help designing a button that can alter the layout of my CSS grid. The grid information is contained within a class called 'container'. My goal is to change the grid layout by simply clicking a button, using either HTML and CSS or JavaScri ...

csscss-grid

`Switch up the backdrop upon selection`

I'm experimenting with bootstrap and hit a roadblock. I have radio buttons that I want to outline when not selected, and appear solid or "btn-primary" when selected. I could try achieving this with JavaScript by giving each button an individual ID, b ...

javascriptbootstrap-4

Applying CSS to select a different element style within a webpage

I was thinking about the possibility of linking one style to another using events like :focus or :hover in CSS alone, without the need for JavaScript. For instance, can the class "hitArea" change the background attribute of "changeArea" when it is in foc ...

javascriptcsshtmlweb-applicationsanimation

Error: Validation issues detected in field functionality

My goal is to loop through a set of text fields and check if the user has input any values. However, I'm facing an issue where even though I have provided values in the text fields, it seems like they are empty. To better illustrate my problem, I have ...

javascriptjqueryhtmlcss

When clicking on a checkbox's assigned label, Chrome and IE may experience delays in firing the change event

When a user checks a checkbox under a specific condition, I want to display an alert message and then uncheck the checkbox. To achieve this, I am utilizing the click function on the checkbox to internally uncheck it and trigger necessary events. I have a ...

javascriptjqueryhtmlgoogle-chromeinternet-explorer

Generate a new tree structure using the identifiers of list items within an unorganized list

Attempting to convert the id's of li's in a nested unordered list into valid JSON. For example, consider the following list. To be clear, the goal is not to create the UL list itself, but rather the JSON from the li id's <ul class="lis ...

javascripthtmljson

What is the best way to capture the input value upon pressing the "Enter" key?

My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't re ...

javascripthtmlcss