CODEWITHSUNDEEP
javascriptcssreactjsgoogle-chrome-devtools
Ishaan
Ishaan

Reputation: 99

CSS resizing issue with image

I'm trying to use this background gradient and keep it centered on all screen sizes (Next.js, React, Sass)

gif of resizing

The JSX:

      <div className="bg-gradient-container">
          <Image src={Gradient} alt=""/>
      </div>

The css styles:

.bg-gradient-container {
  position: absolute;
  top: calc((470px - 32vh)*-1);
  left: calc((1920px - 100vw)/-2);
  width: 1920px;
  z-index: -10;
  animation: appear2 3s ease-in;
}

I've been trying things for a while and can't figure it out. In the gif, when I set it to Desktop mode then it resizes fine. When it's set to mobile, it resizes keeping the entire right side of the image in frame.

The weird thing is that when I hover over the image in devtools, it says that the width is 1920x1080, and the text content is the full viewport width (even though it doesn't take up the whole viewport ??). devtools image

Upvotes: 0

Views: 93

Answers (2)

Soup
Soup

Reputation: 31

Try:

.bg-gradient-container {
  position: absolute;
  top: 0;
  left: 0;  
  height: auto;
  width: 100%;
  z-index: -10;
  animation: appear2 3s ease-in; 
}

If that does not work, you might need to apply height: auto and width: 100% to the image. The idea is that the Image element should fill it's container (parent element).

Also, Chrome dev tools can be a little buggy when using responsive mode, sometimes it does not resize everything correctly. When you select something like 'iPhone 12 Pro' from the Dimensions dropdown menu in dev tools, does the image resize correctly?

Upvotes: 0

ANDO Andriamalala
ANDO Andriamalala

Reputation: 318

try to use

left: 50%;
transform: translateX(-50%);

instead of left: calc((1920px - 100vw)/-2);

Upvotes: 1

Related Questions