When the browser is resized, the page background will adjust accordingly to

I'm struggling with a website I'm creating for a school project centered around saving Skymall. Whenever I resize the browser window, the background permanently resizes as well. Here's an example of what happens:

  1. I open the website
  2. Then I resize the browser window
  3. Finally, when I return to full screen, the background image only covers the top part of the webpage and allows free scrolling past it.

You can see a demo here: invisonal.com/demo

Here are some snippets from my CSS:

.bg {
    position: absolute;
    height: 250%;
    width: 100%;
    z-index: 0;
}

.ibg-bg {
    position: absolute;
}

#main {
    vertical-align: middle;
    z-index: 1;
    position: relative;
}

What is causing this issue? And how should I share my code with you all? The CSS and HTML files are quite large, and I'm unsure where specifically in the file they are located. Can I upload the code to Dropbox or another platform?

Thank you!

htmlcss

Answer №1

After making a change, the background still fills the entire screen even after resizing.

<script>
$(document).ready(function(){
   $(".bg").interactive_bg();
   $("#btns").interactive_bg({
     strength: 10,
     scale: 1.15,
     contain: false,
     wrapContent: true
   });
});

/*$(window).resize(function() {
  $(".wrapper > .ibg-bg").css({
    width: $(window).outerWidth(),
    height: $(window).outerHeight()
  })
})*/

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

Is there a way to incorporate CSS or tables when converting HTML to PDF using JavaScript?

While working on a project, I successfully converted an HTML file into a PDF. However, the output did not display the CSS design. Can anyone provide suggestions on how to include CSS design in the PDF file? Below is the JavaScript function code: $(funct ...

javascripthtmlcsspdfjspdf

turn off redundant div wrapper in React

Is there a way to remove the extra div wrapper in React when using ES2015? This additional wrapper is causing issues with centering my component in C#. #First div .default-content { margin-right: auto; margin-left: auto; padding: 16px 16px 16 ...

cssreactjstypescriptless

Unable to get `tr:nth-child` to function properly within an MVC view

I have come across many questions regarding my issue, but none seem to offer a solution that works for me. The problem lies with the styling in the upper section of my view (which I plan to transfer to bootstrap later on). My main objective is to implement ...

cssasp.net-mvcrazor

Avoiding Navbar Link Clicks due to Z-Index

Is it possible for the z-index or positioning of an element to hinder a user from clicking on a navbar link? When I visit my website , I find that I am unable to click on any of the links in the navigation bar. Could this be due to the z-index or position ...

jqueryhtmlcsscss-positionz-index

If the element contains a specific class, then remove that class and apply a new

Encountering an issue here. I have 4 HTML elements structured like this: <!-- Light Color Scheme - Header False and Show Faces True --> <div class="fb-like-box h-f_dsf-t visible" data-href="http://www.facebook.com/pages/Alpine-Adaptiv ...

jquerycsshtml

Is there a way to direct to a specific URL upon clicking a button using PHP?

In my PHP code called registerprocess.php, it executes after clicking a submit button on another page named userregistration.php. If a user tries to register with an email that already exists in the database, I want registerprocess.php to redirect back to ...

javascriptphphtml

Conceal the "contact numbers stored in the phonebook" on the page while still showing the outcomes

Here is a straightforward Live Search script that I find to be quite handy, but I am looking to make a specific modification. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_list The current script uses live search for a "phonebook", ...

javascriptjqueryhtml

interactive dropdown feature using the select element with ajax on the onselect event

I am currently working on a web application where I have a drop-down list of categories. Upon selecting a category, the server fetches data in JSON format with subcategories related to that specific category. Based on this data, I'm dynamically popula ...

jqueryajaxhtml

Is there a way to ensure that an image stays pinned to the bottom of the screen, regardless of the device or screen

Looking for a solution to keep an image centered at the bottom of a website page regardless of screen size? I've tried different recommendations from Stack Overflow without success. position:fixed; bottom:0px; left:50%; Still struggling to make it wo ...

csscss-positionresponsiveresponsive-images

Utilize a function with Document Write to output content onto a textarea

I am trying to implement a function that will display the result in a textarea using Javascript. Currently, the function writes the output on the body using document.write. However, I want the function to be triggered by an onclick button and display the ...

javascripthtml

What causes the double click on the button?

<div class="btn-group btn-group-toggle button-div" data-toggle="buttons"> <label class="btn btn-secondary" onclick="alert('option1');"> <input type="radio" name="op ...

htmlbootstrap-5

Unable to showcase array JSON values on HTML using ng-model

Utilizing ngTagInput for autocomplete textbox and successfully receiving suggestions. To display the values of data-ng-model (named "list") I am using: {{list}} and it is showing correctly. However, when selecting "list1", the display appears as: [{"lis ...

javascripthtmljsonangularjs

Issues with jquery: dropdown menu not displaying border styling above fixed-positioned div

I've been working on a drop-down menu, but I can't seem to get the border and box shadow styling to display properly over my fixed .menu2 div. Click here .menu ul li ul{ position:absolute; right: 0px; border:1px solid #C3D1EC; /*box-shadow*/ -w ...

javascriptjqueryhtmlcss

The Google Static Maps API provides developers with a tool to generate

Despite my best efforts, the map on my website is not displaying properly. Although the URL seems to be correct since clicking on it leads to the right map, the iFrame itself appears blank. <?php $addressStr ="516 East Liberty Street, Ann Arbor, MI 4 ...

phphtmlcssapi

Submitting data through a PHP server-side script

I am facing a dilemma regarding why the form is not submitting and directing me to the index.php page. Being new to PHP, I am attempting to utilize the User object. Below is my current progress: <main> <header> <h1>Cr ...

phphtmlclient-serversql-update

There seems to be an issue with XAMPP as I am unable to start my server due to an

A problem has occurred: Apache shut down unexpectedly. 11:58:07 [Apache] This could be caused by a blocked port, missing dependencies, 11:58:07 [Apache] insufficient privileges, a system crash, or another shutdown method. 11:58:07 [Apache] Click on ...

phphtmlmysqlxampp

"Utilizing Bootstrap 4: Wide text causes columns to stack on top of

My website has a layout with three columns: col-auto on the left, col in the middle, and col-auto on the right. The col-auto columns display skyscraper ads (600x160) while the col column contains text. However, when the text inside the col column is wide, ...

htmlcssbootstrap-4

issue encountered while attempting to load a previously saved game

I recently developed a puzzle game and added a save system, but I encountered an error while trying to load the saved data: Check out the website here And this is the saved file Here's the code snippet that is executed when loading the saved data: ...

javascriptjqueryhtml

react-indiana-drag-scroll does not fully display the shadow of the last item

Currently, I am utilizing react-indiana-drag-scroll for a Horizontal scroll feature. However, the red shadow on the right side of the last item (the 30th item) is not visible on the screen. I have attempted to add padding, margin, and border, but none of ...

htmlcssreactjs

Accessing an array of checkboxes in PHP

$count=0; while (db_results) { $count++; echo '<input type="checkbox" name="selection['.$count.']" value="'.$link.'"'; if ($selection[$count]) { echo ' checked'; $storage .= $link; } echo '/>'; } ...

phphtmlarrays