Template's background image too large for some displays

[factor3]

I am working on an index page that is based on the Prime Drive template:

https://library.pinegrow.com/bootstrap5/templates/primedrive_bs5/

Otherwise known as Template 12.

One great feature of the Prme Drive template is that (like a lot of the Pinegrow templates I have seen) it displays a nice background that sizes itself to completely cover the browser regardless of the browser’s window size while allowing the user to scroll down to see all supplementary content. That is why I chose it as a template.

I made some alterations (removing the car advertisement stuff and the form it displayed) and put my own content there. I kept the section it had and changed the background URL to my company’s graphic.

I am seeing a real problem displaying my graphic. With some sizes, noteably medium size, I can see the entire image. Unfortunately, in larger sizes the image appears to grow too large in larger sizes, and parts of it get cut off.

The template has the image being displayed as the background of the first tag. The background is centered, and its background-size rule is set to “cover”. The image is, consequently, sizing itself according to the size of the section. Is there some way to scale the image down so that it isn’t too large for the section using it for a background?

[abirana]

I’m not sure if I got your point but the way that background covers the whole area is by cropping the image to it’s available area. Because we cannot show whole image in all breakpoints, that is why some parts of the image gets cut off.

[factor3]

abirana:

Thanks for the swift response.

I already knew why the image gets cropped. What I don’t know is why the image gets too large in the first place. The image itself has a constant size, and on smaller screens it does not get large enough to be cropped. It only does this on larger screens. Frankly, that behavior makes no sense because on all screens the image is supposed to be sized to fit in the it is the background for. On larger screens, however, the image is sized so that it is too big.

What is weirder: the cropping on larger screens only occurs with my image. The image that came with the Time Drive template resizes properly on all screens. It is not cropped on any but very small screens – behavior that is expected since smaller screens aren’t able to accommodate the full image in any event (there seems to be a minimum size that the image can shrink to).

No, this cropping problem only started when I exchanged the image that came with the template for my image. something about my image seems to be causing it to be improperly resized on larger screens.

All of this is useful, but what I was actually asking is if there is a way to control the sizing of the image so that it can be scaled down (made smaller with the same aspect ratio) on larger screens so that it won’t be so large that it has to be cropped. I am still asking this.

Is there a way to do this in CSS? Is there some other way to do this?

[abirana]

I don’t think I got the clear picture without looking at the project. I’m guessing your image is more square in size or vertical, for larger screen it is best to keep the size around 16:9

There is indeed one option to have different size images, you can check it on the Design panel. Please check the screenshot

You can learn more about it here Bootstrap Design Panel | Pinegrow Web Editor

[factor3]

This problem is not a matter of image size. The CSS in the template resizes the background image so that it fills the entire , regardless of the size you make the image. That is what the “background-size: cover” does. It also preserves the aspect ratio while resizing.

The best way to help you understand the problem is to show you. Because my “new user” status prevents me from adding more than one image at a time, I ask that you please take a look at the following posts:

[factor3]

I am comparing two images: one is the image that comes with the template (the car image) and the other is the image I want to use for my site. Both images I have deliberately made the same size (1200px by 709px). As a result they have the same aspect ratio as well.

When I create a new project using Template 12 and just display it in a large- screen browser, I see the following:

[factor3]

I then make the browser fill the screen, and see the following:

[factor3]

Note that the images are not cropped at all. The Template 12 image is well adapted to fit both screens.

Next, all I do is change the image from the default to my image. My image is below:

[factor3]

I then display the result to a large screen and get:

[factor3]

and for the fullscreen:

Note how the bottom and right side of the picture is cropped in both views of my image (cropped worse in the full screen) but not cropped in either of the views of the car image that comes with the template. This happens despite the fact that both images are JPG files and both images are the same size – meaning that both images should be sized and scaled the same when displayed in different screen sizes. That they are not is the problem that I am trying to solve.

Can you think of a solution to this problem?

[RobM]

Hi @factor3,
Can you show us some code or share a link? Otherwise, we are just making wild guesses. The easiest would be opening up DevTools, selecting that section, and providing a screenshot. That way we can see both the HTML and applied CSS. The best would be to share your project.
Cheers,
Bob

[factor3]

RobM:

The code is in the Pinegrow template! As I said in my previous post, all I did was take Template 12 (provided by Pinegrow) and replaced the main image with one that I created. As I also stated, the image that came with the template and my image are the same size, using the same CSS code, but they behave differently in the template.

Start Pinegrow. Click on “New Page or Project”. Make sure that the Updated “Bootstrap 5 Blocks” is selected. Scroll down to the “Prime Drive” template (17th from the top) and select it. You will have all the code that I am talking about.

There was only one change I made to the template code, which I will provide here. I changed the poster class in the bootstrap_theme/bootstrap.css from:

.poster {
z-index: 0; }

.poster:before {
background-image: url(https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDE0fHxjYXJ8ZW58MHx8fHwxNjMxNjQ3NTY0&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=1200&fit=max) !important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
content: ’ ';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
position: absolute; }

body.poster:before {
position: fixed; }

@media (min-width: 1440px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 992px) and (min-resolution: 192dpi) {
.poster:before {
background-image: url(https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDE0fHxjYXJ8ZW58MHx8fHwxNjMxNjQ3NTY0&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=2000&fit=max) !important; } }

to:

.poster {
z-index: 0;
}

.poster:before {
background-image: url(’…/assets/MainPict_big.jpg’);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
content: ’ ';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}

body.poster:before {
position: fixed;
}

@media (min-width: 1440px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 992px) and (min-resolution: 192dpi) {
.poster:before {
background-image: url(’…/assets/MainPict_big.jpg’);
}
}

To make things clear: note that aside from the formatting of the CSS selectors, the only actual change is the image that is set in the background.

That was the only change made. The rest of the code (HTML, JS, and CSS) remains unchanged.

The MyPict_big image has already been provided in my last post.

[factor3]

RobM:

The code is in the template! As I stated in my last post, all I did was take the Prime Drive template (also known as Template 12) and change the main image on that template. My image is the same dimensions as the default image provided by the template, yet doesn’t behave the same when viewed on the template. The template is provided when you create a new project in Pinegrow.

Start Pinegrow. Click on the “New Page or Project” icon. Make sure that the “Bootstrap 5 Blocks” group of templates is selected. Scroll down to the “Prime Drive” template (the 17th template from the top) and select it. You will have all the code that I am talking about.

If you would prefer a link, use the one I provided on the second line of my first post. My “new user” status doesn’t allow me to duplicate it here.

I only made one change in the entire project. I changed the poster class that is in bootstrap_template/bootstrap.css from:

.poster {
z-index: 0; }

.poster:before {
background-image: url(https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDE0fHxjYXJ8ZW58MHx8fHwxNjMxNjQ3NTY0&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=1200&fit=max) !important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
content: ’ ';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
position: absolute; }

body.poster:before {
position: fixed; }

@media (min-width: 1440px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 992px) and (min-resolution: 192dpi) {
.poster:before {
background-image: url(https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDE0fHxjYXJ8ZW58MHx8fHwxNjMxNjQ3NTY0&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=2000&fit=max) !important; } }

to:

.poster {
z-index: 0; }

.poster:before {
background-image: url(’…/assets/MainPict_big.jpg’) !important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
content: ’ ';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
position: absolute; }

body.poster:before {
position: fixed; }

@media (min-width: 1440px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 992px) and (min-resolution: 192dpi) {
.poster:before {
background-image: url(’…/assets/MainPict_big.jpg’) !important; } }

To make things clear: the only change in this code is the image that is displayed in the background. All other code (HTML, CSS, etc) is the same.

The MainPict_big.jpg file is provided in my last series of posts.

[factor3]

RobM:

The code is in the template! As I stated in my last post, all I did was take the “Prime Drive” template (also known as Template 12) that is offered by Pinegrow and change the main image that it displays. The problem is that despite the fact that I deliberately changed my image so that it is the exact width and height as the default image provided in the template, the display of that image is different from the display of the template image.

Start Pinegrow. Click on the “New Page or Project” icon. Make sure that the updated “Bootstrap 5 Blocks” group of templates is selected. Scroll down to the “Prime Drive” template (17th from the top) and select it. You will have all the code that I am talking about.

If you would prefer a link to the code, feel free to use the link that I provided on the second line of my first post. My “new user” status doesn’t allow me to reproduce it here.

There was only one change that I made in the template code, which I will provide here. I changed the poster class that is in bootstrap_theme/bootstrap.css from:

.poster {
z-index: 0; }

.poster:before {
background-image: url(https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDE0fHxjYXJ8ZW58MHx8fHwxNjMxNjQ3NTY0&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=1200&fit=max) !important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
content: ’ ';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
position: absolute; }

body.poster:before {
position: fixed; }

@media (min-width: 1440px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 992px) and (min-resolution: 192dpi) {
.poster:before {
background-image: url(https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDE0fHxjYXJ8ZW58MHx8fHwxNjMxNjQ3NTY0&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=2000&fit=max) !important; } }

to:

.poster {
z-index: 0; }

.poster:before {
background-image: url(’…/assets/MainPict_big.jpg’);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
content: ’ ';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
position: absolute; }

body.poster:before {
position: fixed; }

@media (min-width: 1440px), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 992px) and (min-resolution: 192dpi) {
.poster:before {
background-image: url(’…/assets/MainPict_big.jpg’) } }

Note that the only change made is the image that is displayed in the background. No other changes were made to any other code in the site.

The MainPict_big image is provided in the 7th post above.

[abirana]

I don’t see any issue here, as you said you know that background-size: cover tries to cover the area by resizing the image but it cannot do it without cropping the image. This is expected browser behavior, this is how it works.

You are imagining that your image be fitted in all browser width but it cannot happen without cropping the image.

It is not cropping just your image it will crop all the image, please compare the image again, this time please check the original image here https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixid=MnwyMDkyMnwwfDF8c2VhcmNofDE0fHxjYXJ8ZW58MHx8fHwxNjMxNjQ3NTY0&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=2000&fit=max

This image is also being cropped depending on the browser size. Only the thing is focus object (car) is in such a position that it doesn’t get cropped so much. But for very small screen it will get cropped but still it looks good.

So the solution here is to use an image where you focus object should be on the center or little far away from the sides.

For a test try an image with something that is on the center and check.

[factor3]

Abriana:

I think you are missing my point.

1. Because I am using the “Prime Drive” template as the base for my site, the first image I get when I create the page is the one from the link you provided (new user status prevents me from repeating it).

2. As I show in posts 6 and 7, I used that image you referred me to to display large and fullscreen (xxl) views of the browser. The image is not cropped on either display.

3. As I show in subsequent posts, the same page, with the same code but with only the image changed, actually crops the image.

4. My image has the same dimensions as the image you referred me to. There are no smaller or larger images provided for either of the images in the template. Neither image has a “focus object” in its center. The CSS used to display both images uses the same centering (hopefully your anti- spam system will allow my reply to RobM to be posted, so you will see the actual CSS for both images). I display the changed page – again with only the image changed – in the two subsequent posts. The image is cropped in both screen sizes. I repeat: the default image – the one you referred me to – is not being cropped.

That is the issue. In summary: pages made by the template, using the image that comes with it (the one you referred me to) do not crop that image regardless of the larger browser screen size used, but when I replace the image with another one that has the same dimensions, my image gets resized differently and gets cropped.

NOTE: As for your suggestion of doing a test, I have already done that. In order to generate the images of display sizes that I have presented in this topic, I created two projects: one that has an unchanged “Prime Drive” page (a “before” project) . The other has a “Prime Drive” page with only the image changed to use mine (an “after” project). No other code was changed, the dimensions of the image are the same. The only difference between those projects is that the image is different.

[abirana]

As I said original image on the template is also being cropped. If you haven’t checked the original image please check the screenshot below.

As you can see on the 2nd image you sent above, only the area inside the red border is being displayed. And in the same way your image is also being cropped (top and bottom)

[RobM]

Hi @factor3,
@abirana is correct about the behaviour of “cover”. I should have been more careful about reading your post earlier. This is from the MDN docs:

This is always a tough problem in design. Abi’s solution of having the main subject of the image centered with little detail in the areas that get cropped is a good one. Another is to set the width of the image to the viewport width and the height to auto. You just have to have an image that scales sensibly and potentially change it up for mobile.
Good Luck,
Bob

[factor3]

Thanks all for your help and insights.

I ended up controlling the situation by setting a max- width for the page. That way I was able to prevent any serious cropping of my image, and at the same time prevented the page from getting too wide and screwing up some of the text I was putting on it.