CODEWITHSUNDEEP
htmlcssreactjs
perennial_
perennial_

Reputation: 1846

Background scale so part of image fills div

I have an image (let's say it's 100px by 100px). I want to use the image as the background of a div, however I only want the first 50px by 50px to be visible (the other three 'corners' will be used as other backgrounds). I also want to scale the image so that the piece of the image I specify fills the div. For example, if my div is 150px by 150px, i'd want to crop by image to 50px by 50px, and then render it as 150px by 150px.

I can render the image in the background like so (using react): <div style={{width: '5vh', height: '5vh', background: 'url(./image) 0px 0px'}}></div>, however this does not scale the image back to the size I want it. How can I achieve the effect I desire?

Is it described in the image below, where the black square is the div, and the red is the content I want visible in the background, while the blue & red are the entire source image.

enter image description here

This is similar to this question, however that answer is several years old and does not rescale the image either.

Upvotes: 3

Views: 54

Answers (1)

maioman
maioman

Reputation: 18762

To divide the image in four you need to double it's dimensions (in relation to the containing div)

background-size:200% 200% ;

Then you use background-position to choose the portion you need:

div{
  background-image: url('http://lorempixel.com/output/abstract-q-c-100-100-9.jpg');
  height: 150px;
  width: 150px;
  background-size:200% 200% ;
  background-position: 0 0; // is top-left
  /* background-position: 100%  100%// is bottom-right */
}
<div>

PS: reactwise you need to camelCase the hyphened properties( ex: background-size will become backgroundSize )

Upvotes: 3

Related Questions