How can I allow scrolling on a background image with a fixed position?

I am trying to apply a full-page width background to a container-fluid element by giving it a position of fixed and height of 100%. However, I'm encountering an issue where the page scrolls when the content exceeds the height of the browser. The project is utilizing Bootstrap 4. Can anyone provide guidance on how to resolve this issue?

<div class="container-fluid kyc-page" >
    <h1 class="head-text">KYC Verification</h1>
    <div class="bannerWrapper"></div></div>

CSS:

.container-fluid.kyc-page {
    background-image: url(../images/banner-img2.png);
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
}

Any suggestions on achieving full background image without causing content overflow?

htmlcssbootstrap-4css-position

Answer №1

Here is an example of HTML code:

<div class="container-fluid kyc-page">
<h1 class="head-text">KYC Verification</h1>
<div class="bannerWrapper">

And here is a CSS style for the above HTML:

.container-fluid.kyc-page {
background-image: url('img.jpg');
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

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

The JQuery Datepicker function consistently returns a null value when attempting to retrieve the selected date

I've encountered a challenge while working on a project recently. Currently, I'm utilizing Spring 3.0 with its integrated validation alongside Hibernate 3.6. My goal is to implement a JQuery datepicker for users to input dates. However, the dat ...

jqueryhtmlformsspringdatepicker

Top strategies for creating a fully responsive HTML design

Currently, I am exploring the concept of responsiveness in my small projects for educational purposes. I have been researching websites such as: w3schools-mediaquery While I have come across some interesting insights, I am curious about how to effectivel ...

htmlresponsive-designresponsive

image animation in jquery not functioning properly

I'm attempting to create an image that fades in from the left upon loading until it reaches a certain point on the screen. Despite thinking my code is correct, nothing is happening. Can someone please assist me with this issue? Here is the function I ...

jqueryhtmlcss

Steps for creating scrollable boxes with uniform size using tailwindcss:1. Define a specific width and height for

<div className="overflow-x-auto p-5 gap-5"> <div className={` bg-orange-700 w-[300px] h-[300px]`}></div> <div className={` bg-orange-700 w-[300px] h-[300px]`}></div> <div className={` bg-orange-700 ...

cssnext.jstailwind-css

Adding a border to the input field in Bootstrap for enhanced styling and visibility

Looking to replicate the border style on an input element as shown in this image: https://i.sstatic.net/a2iwZ.png The current code I have is producing a different result. Can anyone assist me in achieving the desired border style? <!DOCTYPE html> ...

jquerytwitter-bootstrapcss

Browser Bing Parser

After successfully creating a web parser for Google search results, I decided to implement a similar parser for Bing. However, I encountered an error that I couldn't resolve. Below is the code snippet that caused the issue: var rows = htmlDoc.Documen ...

c#htmlasp.netasp.net-mvcparsing

Dynamic styling with jQuery input focus animation

Whenever I interact with the input field, I want my border colors to animate in and fade out smoothly. But I'm facing some challenges. Here is how I've set it up: HTML <input type="text" id="search-input" placeholder=&quo ...

jquerycss

Balanced Height Panels - Utilizing Flexbox and flex-wrap: wrap

i'm having trouble with a layout design, specifically with getting the columns to be equal height, especially when the text wraps around. Can anyone provide some guidance? https://i.stack.imgur.com/bbDKj.png Within my HTML template, there are multipl ...

htmlcssflexbox

What is the best way to arrange form inputs in a single row?

My form consists of three input boxes. While the first two inputs are single line, the third is a description field with 10 rows set as default. However, for some reason, this third box is not aligned properly with the other two. Please refer to the screen ...

htmlcss

The flexbox layout is not properly stacking div rows in a column

Objective: Creating a flexbox layout with a responsive background image that adjusts in height when the screen size changes, causing elements to wrap; In addition, there is a fixed header bar at the top of the page. The layout consists of a full-screen co ...

htmlangularcssflexbox

The text in the <p> tag will remain the same color

I am encountering an issue with changing the color in the <p> tags within the code snippet below. Specifically, I am trying to change the TITLE text to gray but have been unsuccessful so far. If anyone could provide assistance on this matter, it wou ...

htmlcsstext

Exploring elements using dynamic xpaths in selenium

When working with Selenium WebDriver, I am facing difficulties selecting the <input class="cs-autocomplete-input" tabindex=""> element due to its fluid ID. This is because there are multiple items with the same class name on the web page, making it c ...

htmlcssselenium

.comment {Visibility:hidden;} is only functioning on one specific page

What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...

phphtmlcsswordpress

Trouble with CSS rendering on Sharepoint in Edge Browser - Dealing with SEC7111 Issue

Recently, I was moved to a Windows 10 VM from Windows 7 and I encountered an issue with displaying a site for my team at work properly in Edge. A WebPart linking to CSS was showing everything as one large list instead of a table with dropdowns. Oddly enoug ...

htmlcsssecuritysharepointmicrosoft-edge

The footer fails to remain at the bottom of the page when there is limited content available

Despite searching extensively on Google, I have not been able to find a solution to this frequently asked question. My challenge is to consistently position the footer at the bottom of the page, even when there is minimal content present. Below is an exce ...

htmlcsslaravellaravel-bladetailwind-css

Arrow Buttons for Expanding and Collapsing Sections on an

I'm attempting to include a downward arrow when the section is closed and an upper arrow when it's open - at the right side of each tab's head in the accordion. Here is the HTML I have implemented. It contains for-each loops. -- JavaScri ...

javascriptjqueryhtmlcss

Undefined Variable Error in PHP Session

Essentially, this code snippet is trying to create a session using the user's email and password. It checks if both the email and password are entered, and if not, it redirects them back to the login page: <!DOCTYPE html> <?php session_s ...

phphtmlvariablesundefined

The issue I'm facing with my CSS is that the Doctype is causing some styles to

Hey there! I've been pondering the use of !DOCTYPE html lately. I recently put together a basic webpage that looked great on most browsers except for IE. After doing some digging, it was recommended to me to use !DOCTYPE html. However, this ended up ...

htmlcssasp-classic

Missing Overlay in jQuery UI Dialog

I have integrated the jquery ui dialogue into my asp.net mvc application. I customized the styles related to ui dialogues by copying and modifying them. For the overlay, I used the following style: .ui-widget-overlay { background: #666666 url(im ...

jquerycssjquery-ui

Having trouble adjusting the right-hand edges of form elements when using percentage widths

Simply put, the issue is this: Why doesn't the second row of elements, with widths of 35% and 55%, take up the same amount of the page's width as the first form element which uses 90%? I often have to adjust the percentages differently dependin ...

htmlcssformsbrowseralignment