Creating a Full Height Background Image with a Responsive Width Using Jquery

I am facing an issue with my background image dimensions of 1400 in height and 1000 in width. When using any full-screen background jQuery plugin or code, the image crops from either the top or bottom to fit the entire screen. However, I am looking for a solution where the background image remains responsive based on the browser's width while ensuring that the full height of the image is visible with a scroll bar. Currently, it cuts off the height from both the top and bottom.

If achieving this is not possible, I would like the cropping to only occur at the bottom to maintain the aspect ratio.

javascriptjqueryhtmlcss

Answer №1

.bg{
  width: 100%;
  height: 100%;
  background-image:url(path/to/image.jpg);
  background-position: top center;
  background-size: cover;
}

By setting the background-size property to cover, the image will be cropped at the bottom while covering the entire element.

Check out a demo here: http://jsfiddle.net/Rkf6Q/

If you want to maintain 100% height and crop the width, simply adjust the background-size parameter to auto 100%.

See the demonstration here: http://jsfiddle.net/Rkf6Q/1/

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

Performing a task through an AJAX call in DNN MVC

During my DNN MVC development journey, I encountered another issue. I am unsure if this is a bug, a missing feature, or a mistake on my part. Let me elaborate on the problem below. My Objective I aim to trigger an action in my controller by making an AJA ...

jqueryjsonasp.net-mvcdotnetnuke

Sending information from a controller to a view in Ruby: a how-to guide

Currently, I am utilizing Ruby and facing the need to provide users with a constant status update message while a lengthy task is executed in the controller. During this method, various rows are being inserted into the database. My goal is to display a me ...

jqueryruby-on-rails

JQuery cannot target content that is dynamically inserted through an Ajax request

When I use an ajax call to pass dynamically generated html, such as in the example below: var loadContent = function(){ $.ajax({ url: '/url', method: 'GET' }).success(function (html) { $('.con ...

javascriptjqueryhtmlajax

Adding a data attribute to a Material-UI Button: A step-by-step guide

I'm trying to include a custom data attribute in the Material-UI Button Component as shown here. Here's what I attempted: <Button inputProps={{ 'data-testid'='clickButton' }} > Click </Button However, this approach ...

htmlreactjsmaterial-ui

Creating reactive data in a Vue.js 2 component

I'm currently learning Vue.js 2. I encountered an issue with my code while receiving dynamic data from a server (using Laravel 5.3). The problem arises when I attempt to declare the users array within the component instead of declaring it in the Vue() ...

javascriptvue.js

Tips for efficiently handling multiple form inputs using PHP

As part of my project, I am designing an admin panel for a distribution company. They have specifically requested a feature where they can input orders for all clients through a single page. To meet this requirement, I have created a dynamic form that gene ...

javascriptphpjqueryformsserialization

React's useEffect delay instability

Currently, I am in the process of creating a Pomodoro clock. My approach involves utilizing the useEffect and setTimeout functions to develop countdowns. Initially, everything appeared to be running smoothly until I noticed a delay ranging from 30ms to 50m ...

javascriptreactjsreact-hooks

Is there a way to display icons alongside each option in the dropdown menu?

I have a dropdown icon (pumpkin 1) div that is causing spacing issues with the other icons on the page. The problem is that it has a dropdown functionality which needs to overlay the text at the bottom. I want to display all icons next to each other (1,2, ...

css

Steps for linking a keypress to trigger a specific action

I need help creating a script that will redirect to a URL when a button is clicked. Below is the code I have developed. HTML : <a id="#next" href="example.com">↵</a> <a id="#previous" href="example.com">↳</a> JS : $(document ...

javascriptjquery

Struggling to properly implement the prepend logger feature in the code

A function I have created is capable of adding a specified string to the start of each line, whether using streams or a console.log()-like method. Below is the code for this function: // This function prepends a string to each line in a stream exports.lp ...

javascriptnode.jsstreamconsole

Hiding the original shape with ClipPath in d3 ReactJS

Currently diving into the world of D3 and ReactJS, I attempted to clip a circle with a straight line, but struggled to grasp how it functions. Below is the HTML code snippet used to draw an image: <div> <svg xmlns="http://www.w3.org/2000/svg" ...

javascriptreactjsd3.js

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

javascripthtmljquerycssdom

Achieve vertical alignment and responsiveness of elements in primefaces using css techniques

In order to vertically align 2 elements inside an outputpanel, I initially used a margin-top of 3em. However, this method proved to be non-responsive, as shown in the following images: https://i.sstatic.net/yMRXc.png In mobile view: https://i.sstatic.net ...

htmlcssprimefacesstylesxhtml

Storing information in a database

Need help troubleshooting why my form isn't saving data to the database. <div class="container"> <div class="row" style="margin-top:200px;"> <form ENCTYPE="multipart/form-data" ACTION="upload.php" METHO ...

phphtml

Dealing with a throw er; uncaught 'err' event while configuring a server with nodemon

I am currently in the process of setting up my local server using node.js and nodemon. Initially, everything runs smoothly on localhost, but as soon as I refresh the page or navigate to another page, the server crashes with an 'unhandled error event&a ...

javascriptnode.jsnpmservernodemon

Encountering an "Aborted Session" error when clicking the first submit button in ASP.NET Core MVC

I am brand new to working with API calls in JavaScript using Ajax and I'm trying to figure it out as I go. Currently, I've begun developing an ASP.NET Core web application using MVC. In my Index.cshtml file, I've created an HTML form with ...

jqueryajaxasp.net-mvchttp-post

Go through the embedded classes within the WWW::Selenium module

Is there a way in the `WWW::Selenium` library to loop through this HTML structure and extract the hrefs? <div class="myGengo_wrap full_width"> <h1>Dashboard</h1> <div class="blue list"> <span class="title">Sections ...

htmlperlseleniumloops

Could someone lend a hand in getting the X to align properly on this div? I've been struggling with it for ages and just can't seem to crack

This is a demonstration of the CodePen project: Click here to view <div class="annotation"> <div class="annotext"> <div class=annobar></div> <div class="x">✕</div> Lorem ipsum dolor sit amet, consectetur adipiscing e ...

htmlcssblock

Showcase multiple examples of three.js on a single webpage

I need to showcase several 3D objects on my web app within different containers. Currently, I'm creating multiple three.js renderers, each for a separate container. However, I encountered an error message: "WARNING: Too many active WebGL contexts. Old ...

javascriptthree.jswebgl

Troubleshooting the issue with dynamically adding form fields in AngularJS

I am currently working on an online course application and facing an issue with adding form fields dynamically to include additional video lectures for each course. When I attempt to click on the "Add Another URL" button, nothing happens. My expectation i ...

javascriptangularjshtmlangularjs-directiveangularjs-scope