CODEWITHSUNDEEP
htmlcss
NicolasSC
NicolasSC

Reputation: 384

Background is too zoomed in

I have a background image for my hero section. On some screen, the background image fits perfectly. However, on some other screens such as my iPhone, it's really way too zoomed in.

I tried solutions on Stack Overflow, such as background-size:contain or background-size:100%, but I end up with like a background that it is repeated 3-4 times. Here is my code for the background:

.bg-hero {
    background-image: url('/img/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

Example of current situation

Upvotes: 0

Views: 113

Answers (3)

mehul kalena
mehul kalena

Reputation: 62

Try min-height and check one

.bg-hero {
        background-image: url('/img/background.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        min-height:100vh;
    }

Upvotes: 0

A Haworth
A Haworth

Reputation: 36512

UPDATE the initial answer raised the question of background-attachment: fixed which can cause problems in some combinations of settings. However, in this case testing with different aspect ratios images and leaving the fixed in I was unable to recreate the problem, the background-size: cover worked in both orientations. I leave the info below here for now in case it helps point to something that is causing the problem.

Original:

The problem may be in these settings:

.bg-hero {
    background-image: url('/img/background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

background-attachment: fixed is not supported in IOS. Depending on what version it can lead to e.g. overstretched image (though this question talks of zooming in rather than stretching). See https://caniuse.com/?search=background-attachment but the background-size: cover should have got round that for you.

Partial support refers to supporting local but not fixed

Upvotes: 1

Pranav Rustagi
Pranav Rustagi

Reputation: 2731

The dimensions of the image you are using for the background are not appropriate for mobile screens. The image you are using has landscape orientation. There are two things you can do :

  1. Use different image having portrait orientation. And add media query in your CSS code.

  1. This approach might not be suitable but you can give it a try. Instead of using image as background, use a relevant color for background (like some shade of brown in this case), and add image as a separate element in your HTML. You can again manage the size of image using media queries. And make sure you position image element as fixed.

Upvotes: 0

Related Questions