While having computer-size screen I can see the whole cat in the background, but on a mobile-size screen there is only a piece of this cat. It isn't smaller but it is in normal size and cut. What is the way to make the photo responsive or change the photo on a smaller screen (with another proportions)?

HTML:

    <div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size: cover; background-position: relative; height: 100vh;">
</div>

CodePudding user response：

try background-position:center;

<div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size:cover;background-position:center; background-repeat:no-repeat;height: 100vh;">
    </div>

CodePudding user response：

Add img-fluid to the Class on that existing Div... Eg And then you can probably delete bg-image and all CSS that relates to it.

CodePudding user response：

To add to Sunil's good suggestion, sometimes it's difficult to get good results with the same background image on all devices. Especially when you consider that desktop viewports are typically landscape format, and mobile viewports are typically portrait format.

If this is the case, what you can do is use media queries to define different background images on desktop and mobile.

This has the advantage that you can use both landscape and portrait format background images.

It also slightly more efficient because you can specify a smaller image for mobile, so it will be faster.

CSS

.bg-image{
    background-size:cover;
    background-position:center; 
    background-repeat:no-repeat;
}

/* use portrait format background image on mobile */
@media(max-width:600px){
 .bg-image{
  background-image: url('img/cattery/mobile-photo-cut-protrait.jpg');
 }
}

/* use landscape format background image on tablet and desktop */
@media(min-width:601px){
 .bg-image{
  background-image: url('img/cattery/main-photo-cut-landscape.jpg');
 }
}

HTML

<div class="bg-image" >
</div>

CodePudding user response：

It's quite simple happy programmer Link bootstrap cdn at the top of your html using the link tag Download bootstrap.min.css ''

Then make a '