How come the background is appearing beneath the footer on Qualtrics?

I'm puzzled as to why my background appears under the footer in Qualtrics.

This is the code I've written:

<br />
<style type="text/css">body {
  background-image:url('https://uwmadison.qualtrics.com/CP/Graphic.php?IM=IM_00pfOKSXTudGqfb') !important;
  background-repeat: no-repeat !important;
  background-size:50% 50% !important;
  background-position:center center !important;
    height:100vh !important;
}
</style>

Here's a screenshot to illustrate how it's displaying: And you can access the survey here (I set the timer for the first photo to 6 minutes so you can observe).

Answer №1

Background images are aligned according to the viewport.

To ensure an image appears above the footer, insert it into your HTML code above the footer section using <img />.

You may also want to consider anchoring the footer at the bottom of the page for a more seamless design.

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

Steps for retrieving information from a database and showcasing it in a dropdown menu on a webpage

<tr> <td>Category:</td> <td> <select name="Category"> <option value="<?php echo $Category;?>"></option> </select> </td> </tr> <?php $connection = ...

What are some ways to modify the appearance of the post title table using CSS?

In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...

Utilize JavaScript to apply the CSS -moz-transition

Creating a web application and using CSS3 to transform a div, but encountering a challenge with Firefox. Able to make Chrome, Opera, and IE work properly, except for Firefox. Here's how I'm setting up the working browsers: obj.style.WebkitTrans ...

What steps should I take to create a collapsible Bootstrap navbar?

I'm attempting to recreate the scrolling functionality seen here: It seems like they might be using a customized Bootstrap Navbar, so I've taken one from here: and tailored it to my needs. How can I achieve the effect where the navigation bar ...

The smooth scrolling feature is not functioning properly as the links are jumping to the top and bottom instead of scrolling

My links are supposed to smoothly scroll to the bottom and top, but they're not working correctly even though I believe the JavaScript is functioning properly. Here is the JavaScript code: $.fn.ready(function() { // Smooth scroll to top ...

Limit access to Google Fusion Table to specific types of maps. Eliminate Google Fusion Table for selected map formats

Currently, I am in the process of creating a web map using the Google Maps Javascript API. My objective is to display a Google Fusion Table containing buildings in Boston exclusively on a stylized map named "Buildings." When I switch to the Buildings map t ...

Using Bootstrap 3's "img-responsive" class can cause images to become distorted when

When an image is rotated 90 degrees inside a modal, the img-responsive feature stops working and the image height exceeds the modal height. function rotateImage(){ var angle = ($('#testImg').data('angle') + 90) || 90; $(&apos ...

Is there a way to calculate the total of three input values and display it within a span using either JavaScript or jQuery?

I have a unique challenge where I need to only deal with positive values as input. var input = $('[name="1"],[name="2"],[name="3"]'), input1 = $('[name="1"]'), input2 = $('[name="2"]'), input3 = $('[name=" ...

Issue with displaying background image in mobile device despite successful display in browser and Chrome tools on Angular 18

Revamping my personal website (www.coltstreet.com) led me to explore media queries for displaying different background images. Testing on desktop and via Chrome tools showed positive results, but the real challenge arose when viewing the site on my actual ...

Is there unused space located at the bottom of the button?

Struggling to fix a coding issue related to formatting white space within a button. Sometimes the white space is at the top, other times at the bottom. Here's the CSS code that's not working #filter { position: relative; overflow: hi ...

Locking the second column of a data table with CSS to prevent scrolling

We need to freeze two columns in our data table - "PPD Delivery Schedule" and "Check Opex". The first column is working fine, but we're having issues freezing the second column. We've tried various approaches but haven't been successful so ...

Using CSS3 to generate dots on top of an image with no need for a div container

While browsing through the Nintendo Online website, I noticed an interesting post image with tiny dots created using CSS. This inspired me to achieve a similar effect, but without enclosing the image within a div container. Below is my current code snippe ...

How can you use only CSS (without jQuery) to hide a div and display another?

Is there a way to keep Collapse 2 directly under Collapse 1 when Content 1 is displayed? I attempted to reorganize the code, but it resulted in chaos. :D .collapse{ cursor: pointer; display: block; background: #cdf; } .collapse + input{ displa ...

What are the steps to create a responsive form using CSS?

I have a screenshot below that needs to be recreated using HTML/CSS. This design should be consistent in both desktop and mobile views. https://i.stack.imgur.com/cnfHt.png Currently, I have managed to replicate this in a JSFiddle which looks good on desk ...

Remove the most recent row that was dynamically inserted into an HTML table

Currently, I am in the process of developing an ASP.NET Web Api 2.2 application using .NET Framework 4.5, C#, and jQuery. Within one of my views, I have set up the following table: <table id ="batchTable" class="order-list"> <thead> ...

Is it possible to utilize an integrated web browser (like Chrome) as the graphical user interface toolkit for Java desktop applications?

Wow, those HTML5 websites really stand out - but why is it that my Java desktop apps just don't have the same visual appeal? Swing and SWT seem outdated in comparison. They get the job done, but creating modern GUIs with animations and other flashy fe ...

Tips for creating a multi-line text field with ellipsis using a div in CSS

Similar Question: How to Insert Ellipsis in HTML Tag for Content that is Too Wide Using CSS to Display “…” on Overflowing Multiline Blocks Hello, I am attempting to create a div tag to present a question. The size of this div bo ...

Tips for activating a javascript animation when reaching a specific div on the webpage?

I want to create a simple typing animation that activates when the user reaches a specific div on the screen. Below is the HTML code: <div class="text-8xl"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum volupta ...

Using multiple dropdown selectors in one template is leading to complications

Aiming to replicate this https://i.sstatic.net/u687v.jpg where the Select projects feature is a multi-select dropdown menu and Filter Results functions as a collapse button that, when toggled, reveals three more multi-select dropdown menus. The implementat ...

Cannot get the input padding override to work in MUI autocomplete

I've been attempting to modify the padding within the MUI autocomplete component, but unfortunately, it doesn't appear to be functioning correctly const icon = <CheckBoxOutlineBlankIcon fontSize="small" />; const checkedIcon = ...