Using React and CSS to Trim and Resize Background Images

Here is the HTML code snippet I have:

 <div className="img" />

This is the corresponding CSS code:

.row2 {
  position: relative;
  width: 1790px;
  height: 983px;
  background-image: url("/img.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #d0c6b5;
  background-blend-mode: multiply;

  @media (min-width: 375px) and (max-width: 414px) {
  
  }
}

https://i.sstatic.net/aIWX6.png

I intend to utilize a media query to display only a specific part of the screen. How should I go about doing this?

https://i.sstatic.net/mfeFP.png

htmlcssreactjs

Answer №1

When it comes to responsive design, achieving the perfect crop for all dimensions can be challenging. However, utilizing px can help achieve a consistent crop across different devices.

The key is to experiment with the background-position attribute. Check out the sample code below for reference:

@media (min-width: 375px) and (max-width: 414px) {
  width: 350px;
  height: 600px;
  background-image: url('https://i.sstatic.net/aIWX6.png');
  background-position: -950px 0;
  background-size: 650px 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

Add value to input only if there is data available using a React functional component

Featuring an input field as part of a questionnaire with next and back buttons: https://i.sstatic.net/94zbN.png <input id="answer"/> Capturing the user's input value when they click on the next or back buttons: const [quizIndex, set ...

reactjsreact-hooks

What is the reason for JavaScript consistently returning the initial value as the result?

My current issue involves customizing Joomla article content using a module. I am attempting to hide a div until a user clicks on an input, such as a radio button labeled Test1. Once Test1 is selected, another hidden field within the div should display the ...

javascriptphphtml

What is the best way to choose a value from a React dropdown using Selenium in Python?

Currently I am conducting website testing using selenium in Python. Struggling with the issue of being unable to select a value from a dropdown menu. Does anyone have a solution for this? Here is my website's source code: https://i.sstatic.net/yMnLp. ...

pythonreactjsreact-nativeselenium-webdriver

Alert of incompatible browser in application developed using create-react-app

After developing a web application using create-react-app, I encountered the issue of unsupported browsers such as IE10. Users with older browsers need to be notified to switch to a more up-to-date one for optimal performance. I find myself in a predicame ...

reactjstypescriptbrowsercreate-react-app

How can we identify context menu events triggered by touch actions?

In my application, I have implemented drag-and-drop functionality for elements within an SVG element using d3-drag and d3-zoom. However, on touch-enabled devices such as IE11, Edge, and Firefox, a context menu pops up after a long press, which interferes w ...

javascripthtmltouchcontextmenudom-events

Displaying specific data points

I am encountering an issue where I want to select multiple values and have each selected value displayed. However, when I make a selection, I only see one value from a single box. I do not wish to use append because it keeps adding onto the existing valu ...

javascripthtmljquery

React Redux failing to correctly map the action to props

I have a function called updateChapter that is responsible for updating the database. I have included this function in my component named EditChapter. However, when I checked the props of the component, the updateChapter action was missing. In another com ...

reactjsreact-redux

Is there a way to remove a value from the search bar while updating the table at the same time?

Although I can successfully search the table based on the values in my search bar, I am having trouble with updating the state when deleting a value. To see my code in action, check out my sandbox here. ...

javascriptreactjsantd

What is the best way to implement a gradual decrease in padding as the viewport resizes using JavaScript

My goal is to create a responsive design where the padding-left of my box gradually decreases as the website width changes. I want the decrease in padding to stop once it reaches 0. For instance, if the screen size changes by 1px, then the padding-left sh ...

javascriptcss

What is the best way to showcase a full-screen overlay directly inside an iFrame?

As I work in HTML, I'm faced with a challenge - my iFrame is only taking up a small section of the screen (referred to as 'World' in the example below). What I want to achieve is creating a full-screen div overlay from that iFrame, but curr ...

htmlcssoverlay

What is the best way to overwrite a function that has been declared in an NPM

Beginner's inquiry: I am currently working with an npm package and I am attempting to make changes to the original function without much success. The specific function I am attempting to modify is as follows: AnimationItem.prototype.getMarkerData = (m ...

node.jsreactjsnpmpackage

What is the best way to retrieve the current CSS width of a Vue component within a flexbox layout grid after it has been modified?

There's something about this Vue lifecycle that has me scratching my head. Let me simplify it as best I can. I've got a custom button component whose size is controlled by a flex grid container setup like this: <template> < ...

javascriptcssvuejs2flexboxvuetify.js

When I click the mouse, my drawing function starts lines from the top left corner instead of the latest point

http://codepen.io/FreelanceDev/pen/kLpJSf?editors=1010 You can find my CodePen project through the provided link. While the HTML and CSS elements are working correctly, I am facing issues with the JavaScript functionality. The desired outcome should be d ...

javascripthtmlcsshtml5-canvas

Ways to prompt a specific text value to generate varied responses

Whenever I try to input the letter "h", I expect a specific value in return but for some reason, it's not working as intended. Despite my best efforts to troubleshoot the issue, I have been unsuccessful in finding a solution. It's frustrating bec ...

javascripthtmltextboxrespond-to

When a table is required, .data() will provide a string

Within my HTML code, there is a table structure defined as follows: <table id="table" data-keys="{{keys}}"> Here, the keys variable represents an array (as I later iterate through it using {% for k in keys %}). However, when I t ...

javascripthtmljqueryjinja2

I am just beginning my coding journey and could use some assistance with resolving this dilemma. I have included a photo for reference. I am struggling to add some space after the final card

click here for image description Can someone assist me in creating some space following the final card? ...

htmlcssresponsive-design

How come the font size and div elements combine when I drag and drop the items?

Recently, I decided to create my own drag and drop game. The game is almost complete, but there's one issue. When I try to drop the items into the designated "Drop Items Here" area, their style changes abruptly to mimic the text. For example: https: ...

javascripthtmlcss

Are MobX Observables interconnected with RxJS ones in any way?

Is the usage of RxJs observables in Angular comparable to that in React and MobX? I'm struggling to find information on this topic. ...

javascriptangularreactjsrxjsmobx

A guide to performing an HTTP head request using next.js

I am looking to replicate the solution demonstrated here but within a next.js environment. ...

reactjsaxiosnext.js

What is the best way to showcase images in a horizontal layout with the help of PHP and

Does anyone know how to retrieve images from a MySQL database and display them in rows of three horizontally, while also having a relevant image show on top? I'm struggling with this task. Below is the code snippet for the main div: <div class="co ...

phphtmlmysqlcss