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

Having a minor problem in attempting to retrieve a random value

Having trouble generating a random number from a function. Can someone help explain? const MyButton = document.querySelector(".Flipper"); MyButton.addEventListener("click", recordLog); function recordLog (){ MyButton.style.backgr ...

javascript

Retrieve text from a dropdown menu while excluding any numerical values with the help of jQuery

I am currently implementing a Bootstrap dropdown menu along with jQuery to update the default <span class="selected">All</span> with the text of the selected item by the user. However, my objective is to display only the text of the selected it ...

javascriptjqueryhtmldrop-down-menu

Show the button only when the text is updated

Is there a way to display a button only when the quantity of items in the cart changes, similar to the eBay shopping cart feature? I was able to implement it but it's not functioning as expected. Here is the link to what I have so far. Does anyone kno ...

javascriptphpjqueryhtmlshopify

Modify the data in a JSON array and receive the revised array using JavaScript

Within my JSON object, I have price values in numerical format. I am looking to convert these price values into strings within the same object My approach involves using the map function: var prods = [ { "id": "id-1", "price": 239000, "inf ...

javascriptarraysjsonfunction

Why am I unable to access the array once the loop has finished?

While utilizing the Google Maps API and AngularJS (1.5.8), I encountered an issue where I couldn't access markers that were created in a loop. The code snippet below is located inside the initMap function: var markers = []; for(var i=0; i<10; i++ ...

javascriptgoogle-maps

Utilizing global variables in Vue.js while working with the CLI template

How can I create a global variable in my Vue.js app that is accessible by all components and modifiable by any of them? I am currently utilizing the CLI template. Any recommendations on how to achieve this? Appreciate your assistance. Dhiaa Eddin Anabtaw ...

javascripthtmlvue.jsvuejs2command-line-interface

Creating a circular frame for your image to use as a Facebook profile picture

In the process of developing an input feature that allows users to upload file images for avatar changes, similar to Facebook's functionality. However, I am aware that Facebook utilizes a circular area for avatars and enables users to adjust the image ...

javascripthtmlcssreactjs

Load Materialize autocomplete with data from a JSON file

After hours of research, I am struggling to populate my autocomplete input using the Materialize plugin for a website project. Since I am not well-versed in json or ajax, implementing the original example from the documentation with static data has been qu ...

javascriptphpjsonajaxmaterialize

The challenge with the Optional Chaining operator in Typescript 3.7@beta

When attempting to utilize the Typescript optional chaining operator, I encountered the following exception: index.ts:6:1 - error TS2779: The left-hand side of an assignment expression may not be an optional property access. Here is my sample code: const ...

javascripttypescripturi.js

The AppBar is consuming space and obstructing other elements on the

As I dive into React/Material-UI and learn the ropes of CSS, I've come across a challenge with my simple page layout featuring an AppBar. Unfortunately, this AppBar is overlapping the elements that should be positioned below it. In my quest for a sol ...

cssreactjsmaterial-uiappbar

Technique for Retrieving Hyperlinks from HTML Resulting in Repetitive

I have been working on a web-crawler and encountered an issue while parsing the HTML content to extract links. The method I am using seems to be returning duplicate links, even though the HTML content is correct. Here is the code snippet: public static Ar ...

javahtmlmethodshyperlink

What might be the reason behind the failure to implement my color class on the text within the <p> element?

I'm looking to streamline my stylesheet to easily change the color of different text elements. I've created a list of general colors that can be applied using classes, like (class="blue") . Here are some examples: .dark-grey { color: #232323; } ...

htmlcss

Loading slides in bxSlider using ajax

Is there a method to dynamically insert a slide into bxSlider via ajax without affecting its smooth transition? I am looking to initially display the contents of only one slide upon page load, and then have subsequent slides loaded when the next or previo ...

javascriptjqueryjquery-pluginsbxslider

Creating a Select Directory feature with React - A Step-by-Step Guide

I am in need of uploading all files from a folder to the server. I have been attempting to use a Select Directory window instead of selecting individual files. The standard method: <input type="file" webkitdirectory directory/> has not worked for ...

htmlreactjsfolderbrowserdialog

Achieving success with the "silent-scroll" technique

I've been struggling to implement the 'scroll-sneak' JavaScript code for quite some time now. This code is designed to prevent the page from jumping to the top when an anchor link is clicked, while still allowing the link to function as inte ...

javascriptjqueryhtmlcss

Choosing options from a drop-down menu based on the selection of a radio button with ever-changing

I have a dynamic form with fields retrieved from a database. This form features questions and answers. My goal is to display a number, such as 5, in a drop-down question based on the selected radio button for question 3 without needing to submit the form ...

jqueryajax

Is there a method to exclude children objects from spring animations during application?

Is it possible to create a fading in and out effect for a div (for example, to cycle through different backgrounds) while keeping its children (such as text) visible at full opacity at all times? {transitions((style, <animated.div class={ bg[i] + ...

htmlcssreactjsreact-spring

CSS - Retain z-index until the transition is complete

Looking at this basic grid layout: <html> <head> <style> .grid { display: grid; grid-gap: 5px; grid-template-columns: repeat(13, 3fr); } .box { position: relat ...

htmlcss

Leverage the power of the YouTube API to determine if a video is able to be embedded

As I delve into the YouTube Data API v3 to determine if a particular video is embeddable, I have come across the status.embeddable property that seems crucial. By making a request like this: https://www.googleapis.com/youtube/v3/videos?id=63flkf3S1bE& ...

javascriptyoutubeyoutube-apiyoutube-data-api

Unlocking the secrets of capturing key presses before submitting with jQuery

I'm seeking help with creating an app that scans a barcode and displays the data on screen. I prefer not to use textboxes in order to prevent data editing. Currently, I have set up the enter key to be automatically sent at the end of the barcode scan ...

javascriptjquery