I'm having trouble positioning a large background image with CSS. Code/examples included

Question

I'm setting up a website, and am at a loss when it comes to some of the more refined points of this CSS. It's kind of complicated to explain, and the code I'm altering could affect the site's entire layout.

So, I set up a dummy site that is an exact copy of what I'm looking at.

The problem child is the 'About' page.

Here's what it looks like on most full-sized PC screens:

And here is a "first draft" we are working off of. Created in another program as a map of how the final product should look.

Ideally, we need these to look the same. The entire wall (all the vinyl lettering and the weird art, down to where the floorboards start) needs to be visible above the dark content area on most devices.

What's troubling me is the way this picture is being presented by the CSS. The background-size:cover; attribute is giving me fits. Here's the style being applied.

background-image: url("images/testa333.jpg");
background-position: 50% -29.85px; \*(this is dynamic and changes as you scroll)\*

And

background-attachment: fixed;
background-size: cover;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
height: 100vh;
overflow: hidden;
position: relative;

I am finding it impossible to manipulate this to get it to look the way I want without affecting other areas of the page. I'm not sure if the answer is in the CSS, if I should re-size the image that's being applied as the background, or what.

Among other things, I have tried altering the size of the image and changing background-size: cover; to background-size:contain but this also affects the layout of other images down the page.

If you visit the actual website link I provided and edit a few things through the browser's console you'll have a better idea of what I'm talking about.

I'd appreciate any help a CSS guru can offer.

I apologize if there's an obvious answer to this elsewhere; I'm used to dealing with server-side stuff and basic back-end UI.

If anyone needs any more info, please ask.

Thanks.

Answer 1

You're running into issues with aspect ratios. Let me try and lay out what's happening, and some ways for you to resolve this issue.

---

What's Happening

You have an image that for argument's sake is 200x300. In your mock, you position everything exactly so that the spot that the image fits into is also 200x300. Everything looks perfect, you can see the entire image and nothing is cropped.

When you try and add the image to your website though, you're noticing the issue that you're running into. You still have your 200x300 image, but now you're trying to fit it into a area that is 200x250. A couple things could result from this.

1. You use background-size: cover; - The entire container is filled, but the top and bottom will be cropped depending on your background-position value. This is what is currently happening.
2. You use background-size: contain; - The entire container is not filled, but nothing is cropped. You will see the background of the container to the left and right of the image.

---

Solutions

In addition to the two things you could do above (which obviously isn't what you want), these might help solve the issue for you.

1. Maintain the aspect ratio for the container your image is in. This is the easiest. If your image is 200x300, your aspect ratio is 2:3. Make sure the container has that aspect ratio at all times so no cropping will occur. It can be 100x150, 400x600, or whatever, so long as the aspect ratio is the same as the image.

2. Use pictures that you expect to be cropped. This is what I will always suggest, but it requires some foresight to pick pictures that look good no matter what. In this example, I would have taken the picture further out or widened it so that you have a little wiggle room for background-position: cover to work with. This is also nice for mobile since screen sizes change and it's hard to keep the aspect ratio in check.

3. Use background-image:contain, but fade the edges into the background so that you can't tell the image doesn't fill the screen. This doesn't always work, and it looks like it won't work for your example, but it's good to keep in mind in case you run into this again. This gives you a ton more room to work with the image and can look really nice if the original image is edited properly.

---

Hopefully one of these solutions works for you. Honestly, it's probably easiest to just make your container taller. Keep increasing the height of your container until the edges are cropped instead of the top and bottom.