SaveTheWest
Member
As the thread title suggests, we've been trying to get our header background image to re-scale based on the browser settings.
As is, when we upload a header background image, the image looks alright for some browser configurations (e.g., Desktop, Chrome browser, 100% zoom, full screen).
However, if we adjust the browser zoom setting from say 100% to 80%, or change from a full screen to a half screen for the browser, it results in much of the background image being clipped/cropped and thus not visible.
The same is true for changing devices to a mobile (with typical browser settings for that device), but the header background image cropping is much worse.
We've tried manually changing the size of of the uploaded image, but this unfortunately just shifts the clipping issue to different browser settings (i.e., it might look good on mobile with the manually re-sized image, but not on Desktop).
In other words, our header background image only looks good on one particular browser configuration (e.g., Desktop, full screen), and not others (e.g., mobile + regular settings, Desktop + half-screen, etc.).
The desired header image is a cartoon scene of a forest with some mountains in the background, and with some animals at various positions within the forest. Due to the cropping described above, many of the animals are often cropped out, or, half cropped out (such that you might only see its head rather than full body for some browser settings). That tends to be really noticeable and not very aesthetic.
--------------
We've tried many different CSS codes in extra.less, as well as in the Header/logo row CSS code box for the style, with no luck.
As far as I can tell, the following CSS code ought to do the trick:
But it isn't.
(It actually seems to do nothing when I add that CSS code, along with adding the following CSS code)
---------------
We've also tried CSS code like this and this (as well as other versions of the following CSS code, such as replacing ".block-header" with other values, and setting background-position to '0 0;').
e.g.,
Where:
All of these images were previously uploaded to the forum, on the same path.
--------------
Here are some of the many webpages we visited in attempt to figure this out:
1
2
3
4
5
6
7
8
9
Along with various webpages on "what does 'background-size: cover;' do?", "what does 'media only screen' vs. 'media' do?", etc.
Have spent quite a few hours on this now, so its not for a lack of trying, though I'm admittedly not too familiar with CSS code and these types of webpage adjustments.
---------
It might be worth mentioning that we're using a custom pre-made style, specifically, this one.
--------
Can anyone please help with this?
As is, when we upload a header background image, the image looks alright for some browser configurations (e.g., Desktop, Chrome browser, 100% zoom, full screen).
However, if we adjust the browser zoom setting from say 100% to 80%, or change from a full screen to a half screen for the browser, it results in much of the background image being clipped/cropped and thus not visible.
The same is true for changing devices to a mobile (with typical browser settings for that device), but the header background image cropping is much worse.
We've tried manually changing the size of of the uploaded image, but this unfortunately just shifts the clipping issue to different browser settings (i.e., it might look good on mobile with the manually re-sized image, but not on Desktop).
In other words, our header background image only looks good on one particular browser configuration (e.g., Desktop, full screen), and not others (e.g., mobile + regular settings, Desktop + half-screen, etc.).
The desired header image is a cartoon scene of a forest with some mountains in the background, and with some animals at various positions within the forest. Due to the cropping described above, many of the animals are often cropped out, or, half cropped out (such that you might only see its head rather than full body for some browser settings). That tends to be really noticeable and not very aesthetic.
--------------
We've tried many different CSS codes in extra.less, as well as in the Header/logo row CSS code box for the style, with no luck.
As far as I can tell, the following CSS code ought to do the trick:
Code:
background-size: cover;But it isn't.
(It actually seems to do nothing when I add that CSS code, along with adding the following CSS code)
---------------
We've also tried CSS code like this and this (as well as other versions of the following CSS code, such as replacing ".block-header" with other values, and setting background-position to '0 0;').
e.g.,
Code:
@media (max-width: 480px) {
.block-header {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(path/to/image/the_image_480w.jpg);
}
}
@media (min-width: 481px) and (max-width: 1024px) {
.block-header {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(path/to/image/the_image_1024w.jpg);
}
}
@media (min-width: 1025px) {
.block-header {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(path/to/image/the_image_original.jpg);
}
}Where:
- "the_image_original.jpg" is the largest size of the said background image,
- "the_image_1024w.jpg" and "the_image_480w.jpg" are the same background image re-scaled to have widths of 1024px and 480px (while preserving the same aspect ratios), respectively.
All of these images were previously uploaded to the forum, on the same path.
--------------
Here are some of the many webpages we visited in attempt to figure this out:
1
2
3
4
5
6
7
8
9
Along with various webpages on "what does 'background-size: cover;' do?", "what does 'media only screen' vs. 'media' do?", etc.
Have spent quite a few hours on this now, so its not for a lack of trying, though I'm admittedly not too familiar with CSS code and these types of webpage adjustments.
---------
It might be worth mentioning that we're using a custom pre-made style, specifically, this one.
--------
Can anyone please help with this?
Last edited:
