After browsing through this post on Stack Overflow, I managed to stretch my background image using CSS with the background-size: cover; property.
However, I realized that this solution doesn't completely meet my needs. I'm dealing with an image of incredibly wide resolution like 3840px x 1024px and I'm struggling to figure out a nice way to achieve the following:
Requirements:
- The image should be centered
- If the viewport width is less than 1280px: Maintain a fixed width of 1280px with horizontal scrolling enabled. When the viewport width is equal to or greater than 1280px, disable horizontal scrolling and display more of the background image.
- If the content extends beyond the 1024px height mark, I want to add a colored overlay above the image that matches the upper part of the picture, creating a seamless blend between the background and the overlay.
My current implementation involves cutting the image into three equal parts. The middle section serves as the background for the content area. As the screen width increases, the divs positioned to the left and right of the center expose the remaining portions of the image. Unfortunately, there are rendering issues in Firefox, particularly with the left div's offset calculation.
Here's the code snippet for the existing setup:
var PageWidth = 1280;
var SideImageWidth = 1280;
function calculateImageSet(){
var bodyWidth = $('body').width();
var fillerSize = Math.floor((bodyWidth - PageWidth)/2);
if(bodyWidth < PageWidth){
$('#fillerLeft').hide();
$('#fillerRight').hide();
}
else{
var imageOffset = SideImageWidth - fillerSize;
var mainHeight = $('#main').outerHeight();
$('#fillerLeft').width(fillerSize).height(mainHeight).show();
# Doesn't seem to work
if($.browser.mozilla){
$('#fillerLeft').css('background-position', '-'+imageOffset+'px 0px');
}
$('#fillerRight').width(fillerSize).height(mainHeight).show();
}
}
Is there a cleaner approach to achieving this without relying on JavaScript?
If any of the requirements are unclear, feel free to ask for clarification.
Thank you!
Edit: I've come up with a nearly functional solution:
#main{
background-color: #d4eaff;
background-image: url('forest-wide.jpg');
background-repeat: no-repeat;
background-size: auto 1280px;
background-position: center top;
min-width: 1280px;
}
This works well when the content doesn't exceed 1024px in height. However, if it does, the blue overlay extends to the bottom, requiring me to adjust the background-position to center bottom at that point.