Including an image as the background in HTML

Hello there,

I'm currently attempting to incorporate background images in the following areas:

  • underneath the body (to cover the entire page, even when scrolling)
  • below the section with class "jumbotron text-center" or perhaps just under main role="main"

Despite my efforts, I haven't been successful. I've included some code snippets, but due to Bootstrap being used, I've linked a JSFiddle code.

:root {
  --jumbotron-padding-y: 3rem;
}

.jumbotron {
  background-image: url("gigi.jpg");
}
// More CSS code here...
You can view the complete code on JSFiddle for more details.

Answer №1

There are no visible images on the body or [role=main] because elements with background-color (.jumbotron and .album) are covering them.

However, including an image should work, as shown in the snippet below.

All I did was add a URL to a Wikipedia image and change its background-size property.

If you want your background image on [role=main], simply remove .bg-light from .album.

Answer №2

To create a fixed background on your website, simply add the following CSS code to the body element:

background-image: url('your-url-here');
and background-attachment: fixed;. This will ensure that your background stays in place as users scroll through your content!

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

Unable to perform updates for personalized fonts

I've been trying to incorporate custom fonts into my website, but I seem to be facing difficulties in actually implementing them. Could someone please let me know if I am doing it correctly? .pattern{ background:rgba(0,0,0,.5) url(../images/pattern ...

Which tag should I use, <b> or <mark>, to emphasize important marketing terms within a paragraph?

Trying to emphasize specific keywords in a paragraph of text can be challenging. I'm currently puzzled about the distinction between the <b> and <mark> tags. These words are highlighted because they play a crucial role in marketing, prompt ...

Activate CSS animation by clicking on a checkbox located within a fieldset

When a checkbox is checked, I want to activate an animation. Here is the HTML code I am using: <div data-role="fieldcontain" > <fieldset data-role="controlgroup" data-type="horizontal"> <input type="checkbox" class="mediaCheckbo ...

`Uniform background color across all pages`

My goal is to allow customers to select a color that will persist across different pages on the website. The code below shows how users can choose a color on the first page: <select id="color" style="width: 5%; height: 10%" size="5"> ...

Hover over the drop-down menu to enable tab on hover mode

Is it possible to make the tab switch to hover mode when I rollover the drop down sub-menu without using JavaScript, and only using CSS? <li id="anchor" class="title dropdown"><a href="#">Main Tab</a> <div class="co ...

What is the best way to convert CSS to JSS for Material-UI styling?

I need to convert some basic CSS to JSS and include it in the global Styles.js file. The original CSS is as follows: .formdetail { display: grid; grid-row-gap: 10px; grid-template-columns: 1fr 3fr; margin: 20px; } .formdetail .cell { display: ...

What are the benefits of utilizing the meta tag Content-Style-Type for linking external CSS files?

Upon digging into the source code of Microsoft's sample StockTrader application, I came across this common snippet in all aspx files: <meta http-equiv="Content-Style-Type" content="text/css"/> <title>.NET StockTrader Portfolio</title&g ...

Advancing with Bootstrap 4: Progress Bar Evolution

It appears that Bootstrap 4 has introduced a new method for updating the progress of your progress bar. Aim: Dynamically update the progress bar percentage upon click <div class="progress"> <div id='progressBar' class="progress-bar" r ...

The Python error message, "JSONDecodeError: Expecting value: line 1 column 1 (char 0)," indicates that there

What is causing this error to occur? Are there any alternative methods available for converting it into a json file? import requests import json url = 'https://finance.yahoo.com/quote/AMZN/balance-sheet?p=AMZN&.tsrc=fin-srch' r = requests. ...

jQuery - encountering issues setting CSS properties within an AJAX callback function

I'm struggling with a jquery ajax callback function to change the background color of a table cell. Despite no errors in Firebug, my code isn't working as expected. Here's the code I have: $(".tariffdate").click(function () { var proper ...

Having trouble understanding why the border-radius attribute is not being applied to tables?

I've been trying to give the outer corners of tables a rounded appearance in HTML/CSS, but I can't seem to get the border-radius property to work properly. After inspecting the elements in Chrome's computed section, I noticed that the eleme ...

I am attempting to populate a cell in a row with an image

Having trouble fitting an image into a column of a row created using Bootstrap. I want the image to be the same height as the row and any part that doesn't fit the width to be cropped out. However, the image either takes up only the width of the colum ...

Guide to changing the activation of Bootstrap popover on elements that are added dynamically

My popover functionality is triggered by a click action on a static element, revealing and hiding the popover. However, I am encountering an issue when dynamically generating new elements with the same functionality: $('.check-out-cell').click(f ...

JavaScript Birthday Verification: Regular Expression Pattern

I am currently testing out JavaScript form validation. The information provided is not being sent to any database, it's just for format testing purposes. All the regex checks are functioning correctly apart from birth. It seems like there may be an i ...

Autosuggest Feature in Google Maps

Can someone please help me with customizing the width of the input text box and drop down menu using this resource: https://developers.google.com/maps/documentation/javascript/places#places_autocomplete? I'm having trouble figuring it out. ...

Influence of External Style Sheet not reflected in HTML

Just as the title suggests, I have an external style sheet connected to my HTML document, and it appears that the footer element may be incorporating the changes, but none of the other content is. Being new to this, I'm trying to pinpoint where I went ...

Modifying CSS property values by handling a returned validation error

Allow me to describe a scenario I've created. Please excuse any language errors in my explanation. I have designed a form for users to submit values. Within this form, users can choose an option - one of which is "Others specify...". When this option ...

Is it possible to access an external website by clicking on a link within a DIV element?

I have a basic website set up like this sample.php <html> <head></head> <body> <a id="myLink" href="http://sample.com">Click!</a> </body> </html> I displayed this website within a DIV-Container on a ...

JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Error: Unable to access the 'files' property"

Just a heads up, my JavaScript skills are pretty limited. Here is the current JavaScript code I have: $('#xhr-filebox').bind({ "dragover": HandleDragEvent, "dragleave": HandleDragEvent, "drop": HandleDropEvent }); function HandleDr ...

What's the name of the auto-triggered dropdown menu feature?

Visit Amazon's official website Description: Within the 'Shop by Department' section- A drop-down menu that remains visible without requiring you to hover over it. However, when the browser is in a non-full-screen mode, the menu disappears ...