Adjusting background size using jQuery as the window is resized

Exploring ways to dynamically resize the background image of my website based on the current window dimensions using jQuery.

At the moment, I have tried the following approach:

$(window).resize(function()
        {

            $("body").css({"background-size" : "100% 100%"});

        });

However, this method results in the background not being displayed at all. If I remove one of the '100%', it only stretches to the width but not the height. I'm unsure about what might be missing in my implementation.

javascriptjqueryhtmlcssresize

Answer №1

My recommendation is to utilize only CSS for this task.

html{
  background: url(images/bg.jpg) no-repeat center center fixed;
  background-size: cover;
}

I opted for using the 'html' tag instead of 'body' as it always covers the entire viewport, making it ideal for backgrounds.

Answer №2

It appears that

    $("body").css({"background-size" : "100% 100%"});

has been optimized to

    $("body").css({"background-size" : "100%"});

perhaps you could manipulate your css like this:

    $("body").attr( "style" , "background-size: 100% 100%" );

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

Should we still be using <input type="date" /> in 2021?

I've come across some old articles cautioning against using , but they were written a couple of years ago. I'm wondering if it's safe to use in 2021 without negatively impacting the user experience. ...

htmlreactjs

The content's div is not extending completely in the horizontal direction

Just starting out with tailwind CSS and struggling a bit with the design aspect due to my lack of CSS skills. Need some assistance troubleshooting my layout, particularly in making sure the div container stretches to fit the screen size properly. https:// ...

cssreactjsnext.jstailwind-css

When the width of the screen is less than 992 pixels, my div will be hidden

I have been working with the bootstrap4 layout, and I noticed that when the screen width is less than 992px, the yellow-div is overlapping the brown-div. Can someone explain why this is happening and suggest a solution? Below is the code snippet: .head ...

htmlcssresponsive-designbootstrap-4

Scrolling a div automatically without affecting its parent element

On a page, I have a scrollable list of items that can be updated with a PUT request. Once the update is successful, another network request is made to fetch the updated list. The goal is to automatically highlight the recently updated item in the list. Al ...

javascripthtmlcssreactjs

Using JavaScript Regular Expressions to locate all prefixes leading up to a specific character

Consider a scenario where you have a string consisting of terms separated by slashes ('/'), like this: ab/c/def Your goal is to identify all the prefixes of this string up to a slash or the end of the string. For the given example, the expected ...

javascriptregexprefix

Making a jQuery AJAX request for JSON from a separate domain

My goal is to send an AJAX request to , expecting JSON data in return (not sure if JSONP) However, when I click on the button to make the AJAX request, I encounter this issue: http://prntscr.com/8xswr1 (Google Chrome Console) Upon double-clicking ' ...

javascriptjqueryjsonajax

How can you utilize jQuery to export multiple-page HTML content into a PDF document?

I'm having trouble exporting HTML to PDF using jQuery, especially when the HTML content spans multiple pages in the PDF file. Below is my current code snippet: $("body").on("click", "#downloadPDF", function () { html2canvas($('#dow ...

javascripthtmljquerypdfpdf-generation

The body parser is designed to efficiently parse and handle both gzip and json formatted HTTP POST request bodies

I've set up an API endpoint to manage http POST requests from a client. At the moment, I'm using Express framework and bodyParser to handle request bodies. What I need help with is configuring body-parser to effectively handle cases where request ...

javascriptnode.jsexpresshttp-postbody-parser

Which specific CSS rule is responsible for the issue I am currently experiencing?

I have styled a left-hand border on items in a list, with the border-left-color set to transparent for all of them. The active item, marked by the css class "active day", has a specific color for its border. Below is a snippet of the code (certain styles h ...

htmlcss

Error: The system is unable to destructure the 'username' property from 'req.body' since it is not defined

Encountering a persistent issue with an error that I've been trying to resolve for days without success. The problem arises when attempting to register a user in the project, resulting in error messages being displayed. Here's a snippet of the co ...

javascriptnode.jsexpressmongooseejs

Achieve smooth scaling of font size in CSS according to body width without the need for JavaScript

Can the font size be smoothly scaled in relation to the width of the body or parent element? I am seeking a solution that does not involve javascript. Is it feasible to relate rem to a specific width? ...

cssresponsive-designfont-size

Is there a built-in binding for input fields in ReactJS?

I've created a somewhat intricate form in React that, when simplified, resembles the following: var MyForm = React.createClass({ init: { data: { "MyValue" : "initial value" } }, getInitialState: function() { return this.init; }, ...

javascriptreactjs

Creating a Gulp automation task to handle ng-constant across various environments

I've been attempting to make this work, but it seems like I might be overlooking something. I'm utilizing ng-constant and configuring different environment endpoints as outlined in the ng-constants issue However, my setup involves using gulp and ...

javascriptangularjsgulp

Problem with CSS hovering on images when hovering on links?

While attempting to add 2 hover images to my website, I encountered an issue where a black border appeared in the middle of the images. This was caused by the hover effects on the links. Below is the code snippet: a:hover,a:active { color:Black; o ...

htmlcss

JavaScript failing to accurately measure the length

Currently experiencing a Javascript issue where the length of an element is not displayed correctly when using .length, even though it shows up in Chrome console. Here is what it looks like in Chrome console <html xmlns="http://www.w3.o ...

javascripthtmlcssconsole.logvariable-length

Analyzing data visualization within CSS styling

I have the desire to create something similar to this, but I am unsure of where to start. Although I have a concept in mind, I am struggling to make it functional and visually appealing. <div id="data"> <div id="men" class="shape"></di ...

javascripthtmlcssstatistics

"Error message: Antd datepicker is throwing an error stating that date.clone/date.load is not a

I am working on a React app that has a checkbox to disable a datepicker. However, when I use the checkbox to disable it, I am unable to select any date. If I remove the checkbox and its function, there is no error. Currently, the error message I am getting ...

javascriptreactjsnext.jsreact-hooksantd

Refresh the cumulative URL count in JavaScript following the completion of an AJAX submission

My shopping cart is filled with URLs that include a total key: The total value in the cart is <span id="cart-status" >1805.32</span> <ul> <li><a href='/Store/Category/Products?user=ADMIN&total=1805.32'& ...

javascriptjqueryajaxasp.net-mvc-4ajaxform

Dealing with unexpected modifications in a React class component

In short, I need to adjust the data in my class component before sending it to the server to match the API request format. To achieve this, I created a method called transformData within my class component which transforms the data extracted from the state ...

javascriptreactjsnext.js

JavaScript accordions failing to open

I've encountered an issue with my website that includes JS accordions. Strangely, they are not opening on the live site, but they function properly on Codepen. I checked the console in Chrome and found no error messages, however, when I looked at the ...

javascripthtmlcssaccordion