What steps can I take to stop the background image from zooming in modal view?

I noticed something strange happening when I open a modal after clicking on an image on my website. The background image seems to zoom in along with the modal, thanks to a new class called .modal-open added to the body element. This class includes additional properties and values in the CSS, causing the background image to adjust as well.

body.modal-open {
padding-right: 16px;
display: block; }


.modal-open .modal {
overflow-x: hidden;
overflow-y: auto; }

Access my code on Js fiddle

I'm seeking a way to prevent the background image of the body element from zooming in when opening a modal. Any suggestions?

htmlcssbootstrap-4

Answer №1

CSS

.bg-picture {
    background-image: url("Images/English-language-background.jpg");
    background-size: cover;
    overflow: auto;
}

HTML

<body>
<div class="bg-picture">

</div>
</body>

Well done, @iamwhitebox. Your solution has fixed the issue.

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

Can a video or image be displayed in HTML using an absolute path from a disk named E: while the localhost files are located in C:?

I'm attempting to construct a basic webpage utilizing HTML and PHP to display various videos, each video within its own videoplayer. The issue arises when I try to find the videos (they are stored in a folder on my secondary hard drive labeled E:&bso ...

htmlpathfilesystemsvideo-streaming

Prevent the loading of a <img> element and replace it with a new one using CSS

Is there a way to hide an <img> element without accessing the HTML directly, only by using CSS? The <img> element does not have any specific class. Here is the HTML markup: <img title="Manual" id="imgAjuda" src="images/ico_aj.png" width=" ...

htmlcss

How can you find the index of an HTML element while excluding any clearfix divs?

In the process of developing a CMS, I find myself in need of determining the index of the element I am currently working on. Consider the following stripped-down HTML structure: <div class="row"> <article class="col-md-4 col-sm-4 project" &g ...

javascriptjqueryhtml

Obtain the data from the hyperlink destination

Having some trouble extracting a value from an href link to use in my database operations. Unfortunately, I couldn't retrieve the desired value. Displayed below is the code for a button: <a class="btn btn-info" href="scheduleSetTime.php?id=&apo ...

javascriptphpjqueryhtml

The Everyday Explanation of Same Origin Policy

Could anyone simplify the concept of the Same Origin Policy for me? I've come across various explanations but I'm in search of one that a child can easily understand. I found this link to be quite helpful. Is there anyone who can provide further ...

javascripthtmlsame-origin-policy

retrieving data from a database to populate selection options using PHP

While working on our thesis, I encountered a challenge where I needed to transfer certain values from my SQL database to another part of the project. Below is a snippet of the sample code I was using: <tr> <td id="t" align="center"> ...

phphtml

Adding an image to a jQuery class name on the fly

I am attempting to add an image before a div by using its className with jQuery. function insertImage(obj) { var dynamicClass = $(obj).prop("className"); After retrieving the classname, I now encapsulate it in single quotes and add a dot to access t ...

javascriptjqueryhtml

Issue with displaying hamburger menu items when using data-toggle in Angular

I've been diving into learning Angular and Bootstrap lately. I wanted to merge some existing HTML content into an Angular component, but ran into issues with its functionality. When I attempt to toggle the hamburger menu icon, nothing happens, and the ...

jqueryhtmlangular

Should I utilize a single form or one for each table row in asp.net mvc?

While working on a project, I caught myself in a coding dilemma: <table> <tr> <th>Code</th> <th>Enabled</th> <th>Percentage</th> <th>Amount</th> <th>Start&l ...

htmlasp.net-mvcstandards

Adjusting the image placement within a modal window (using bootstrap 3)

Behold, an example modal: <!-- Large Modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Why isn't my .gif animation appearing on Google Chrome? Can anyone suggest a reason for this issue?

const urlToLoad = "winners.php"; const ajaxLoader = '<div class="preloaders"><img src="img/preloader.gif" alt="Loading..."></div>'; $(".page").click(function(){ $(".main").html(ajaxLoader).load(urlToLoad); }); I am trying ...

jqueryhtmlcssgoogle-chromeanimated-gif

I'm looking to mirror images within the Bootstrap framework - any suggestions on how to achieve this using jQuery

When hovering over the image, it should flip to reveal text or a link: <div class="clearfix visible-xs"></div> <div class="col-md-3 col-sm-3 col-xs-6"> <div class="speaker-item animated hiding" data-animation="fade ...

jquerycsshtmltwitter-bootstrap

Creating a dynamic webpage with flexible design and interconnected containers using the Bootstrap framework

Creating a responsive layout with nested divs using Bootstrap Check out my HTML code below: <div class="container-fluid" style="height: 350px;"> <div class="row-fluid clearfix" style="height: 100%"> <div class="col-md-9 column" ...

htmlcsstwitter-bootstrapresponsive-design

Adjust the size of the mat-expansion indicator to your desired height and width

Trying to modify the width and height of the mat indicator has been a bit challenging. Despite following suggestions from other similar questions, such as adjusting the border width and padding, I am still unable to see the changes reflect in my CSS file ...

javascriptcssangularangular-material

Click the button to dynamically add a Bootstrap select element

I need assistance creating a select element with a Bootstrap class using a button click event. The element is successfully inserted into the body, but it does not appear on the page. https://i.sstatic.net/ppHfL.png <html> <head> <link re ...

javascripthtmlbootstrap-4

Exploring the differences between pseudo-elements when styled as display:block versus display:inline

I'm currently honing my CSS skills by following a Youtube tutorial from freecodecamp.org Here's the code I've been working on: p::before{ content: "hello "; color: white; font-size: 60px; background: salmon; margin-bottom: 20px ...

htmlcss

Selenium's xpath feature is designed to target only the elements that are currently visible

When using Selenium xpath, it only matches visible elements on the HTML page. Even though there are many other elements present but not visible, the xpath will only return those that are currently visible. This is in contrast to checking the xpath in the ...

javahtmlgoogle-chromeseleniumxpath

Issue with window.getSelection() function in Mozilla Firefox

I have implemented code to retrieve the window.getSelection() and assign it to a variable in order to store the current focusNode and offset when the contenteditable div onBlur event is triggered. This functionality works as expected in the Chrome browse ...

javascripthtmlfirefox

What is the best way to format the JQGrid table for better

Is there a way to indent the table in this example and create white space on the side of the rows and header? I want a white margin on the left of everything below "Stackoverflow example". I'm hoping to achieve this using only CSS. Below is the code ...

cssjqgrid

Using JavaScript to create temporary drawings on a webpage that automatically erase themselves

I am curious about how to achieve a scribble effect that self-erases, similar to what is seen on this website: Example: Thank you! I have come across some similar scripts, but I am struggling to understand how to make the scribble disappear after a few ...

javascripthtmlcss