Stretching/Cropping page background image

Need help Responsiveness
1

I have a background image on a page that I want to stretch to 100%. I can do it with CSS, except that when I give it a set height, it stretches the image width out of its proportions.

I have to keep the image as the page background, as putting it inside an element keeps breaking the collapsing groups responsiveness (I have several elements overlapping the image).

This is the CSS I tried, that stretches the image. Is there a way to stretch it to 100%, but crop the height at 400px? Or other suggestions on how to have a background photo that doesn’t mess with collapsing height of the page?

#bgimage {
  background-repeat: no-repeat;
  background-size: 100% 400px;
}
2

Hey Petter!

Not sure if this is what you are looking for, but I’ve had good luck using a floating group that is set to beneath the page for background images. You can either put an image element in the floating group, or just set the background style of the floating group to be an image – they behave slightly differently. Make sure your page background style is empty otherwise it will block the image.

I then use a little javascript to set the background to the viewport height:

function heroSize() {
$(document).ready(function(){ 
$("#background").css("height",window.innerHeight);
 });
}
// Add an event listener to handle resizing of the window

window.addEventListener("resize", heroSize);

// Execute the initial call of the function
heroSize();

You just need to set the image element id (or the floating group if you go that route) to match the js.

float%20group

Maybe a piece of this is an option for you?

–Ken


Looking to accelerate your app development?

Development of Advanced Apps at https://uniqueideas.com or schedule a free intro session :gift:

Ken Truesdale
LinkedIn

2 Likes
3

Hi Ken,

Thanks for the suggestion! I’ve tried with a floating group, but unfortunately it doesn’t solve it as I’m using a page background color which blocks that image (as you describe).

Do you know if there’s any way to set that background color so that it doesn’t block the image?

4

How about the background color on the floating group, then an image element in the floating group?

5

Ken… you’re a genius!

I had tried placing the Floating Group inside the Reusable with the page content, but it turns out, when inside a Reusable, Floating Groups behave like… regular groups, wreaking all sorts of responsiveness havoc. Placed on the page however, your solution worked like a charm.

A small change in the code to expand the background the full scrolling distance, and not just screen size may come in handy for some (change in bold):

    function heroSize() {
$(document).ready(function(){ 
$("#background").css("height",body.scrollHeight);
 });
}
// Add an event listener to handle resizing of the window

window.addEventListener("resize", heroSize);

// Execute the initial call of the function
heroSize();
3 Likes