Responsive Background Image

[guybower1]

Hi

I have a background on my homepage which was placed via this area

It was done this way in a template I installed from the aDesign Cloud area. I would have been happy to do it in the page editing area normally, but it was already done this way and I haven’t amended it.

My problem is the image is not in any way responsive. It remains 100% of it’s normal size as the screen size changes, with obvious cropping taking place.

I did some research and saw a method at this site, https://davidwalsh.name/background-size, using this code to make it 100% responsive

#x-bg-layer-lower.flex {
	background-size: 100% auto;
}

The selector was found using Good Developer Tools, but it does not do anything to the background image at all.

The background image has a slider which drops text over it.

Can you tell me of a way to make this image responsive, please? If it means moving the background image from where it is currently placed, that is fine; as indicated, it is done this was due to the template from your Design Cloud area.

Thanks

[christian]

Hey @guybower1,

Our theme’s page background feature is responsive. Please watch this video https://youtu.be/pAJDZRz3pGQ

As you can see in the video, the image covers whole of the screen. It resizes based on the aspect ratio of the screen. It is only natural that certain parts of the image will not be displayed because of aspect ratio mismatch. Showing a landscape oriented image isn’t physically cover a portrait screen size. That is how a background image should behave and we can’t change nor modify that.

If I’m not understanding what you need, please provide detailed description and/or images of how you want the background image to look on desktop, tablet and mobile. For example, you can show all parts of the image but on mobile, white bands will show up. That design is not recommended for the Page Background and we will not support the achievement of the design.

If you wish to control the background on your own, remove the image in the Page Background field or setting and you need to use your own CSS. Add your CSS in the Page CSS area. That’s above the Save button in the builder.

Below is a sample code to get you started.

body {
    background-image: url(IMAGE_URL);
    background-size: 100% auto;
    background-position: 0 150px;
    background-repeat: no-repeat;
}

To know the usage of that CSS, you can learn here https://www.w3schools.com/css/.

Hope that helps.

[guybower1]

Hi Christian

Thanks so much for getting back to me.

Wow, as far as image responsiveness goes, it’s outta this world. I am wondering why none of your themes are able to do it this way natively. I removed the 150px, as that put a margin at the top which was unnecessary, but seriously, this image now remains 100% showing at all screen sizes. Looks like I’ve found my new way to place a background image - cheers!

So as far as the image goes, outstanding, but what that now does is the text on the slider remains in the same position, yet of course, the centre point of the image moves as it resizes. One problem solved and another created.

Any thoughts on this resolution?

Regards

[christian]

Hey @guybower1,

Just to clarify, our themes’s background image is responsive. It covers the whole screen from desktop to mobile. What you’re looking for is to shrink the whole image and not cover the screen and that is not what a Background should be. That’s also why you see a very big gap as I showed you in my previous reply.

I understand what you want to achieve now but it’s not possible if the Slider Revolution is displaying as Fullscreen. You must set it to Auto.

And, your Layer Area Size must all meet the 16:9 aspect ratio.

Using Slider Revolution is not the ultimate solution for your problem though, the simplest and seamless way to display an image as it is or without cropping while spanning the full width of the screen in the header is to use Pro Header Builder. Just simply add a bar on top of your current bar and set the background image. You can use the Feature Image Dynamic Content if you wish to pull the Featured Image of the page. You set the Background Size and Position (no CSS needed).

Then to shrink the text, just follow the tutorial below.

Responsive Text Setup for the Button Element in Cornerstone (Pro Content...

Hope that helps.

[guybower1]

hi Christian

Thanks again for getting back to me.

Perhaps using the term background image is not strictly what I meant, if by background image you mean to cover the entire screen. That is not what it means to me. I’m sure by now you have realised that what I am after is simply an image to sit above the masthead on each page. That image needs to be 100% responsive; resizing as the screen resizes, but maintaining the original aspect ratio.

So I have now removed the background image code from CSS and created a bar above the navigation bar in header builder. I have added the image and the best fit seemed to be 50 VW in height for sizing. I didn’t fancy putting in a fixed pixel size and this seems to work pretty well, resizing correctly.

My concern now with the text aspect is the reason a slider was used was so that the text drops down on top of the image; hopefully always landing at the exact centre of the visible image . If there is another way to animate the text to do this other than using the slider, I am happy to try it, as I think that by adding the image this way, it eliminates putting a slider over the top.

I hope I making sense with the ultimate aim. In the end I will probably go with using the featured image dynamic content; that way the image will be different for each page.

cheers

[rad]

Hi @guybower1,

Thanks for providing more information, but seems it’s not possible without the slider. But possible if you’re going to do some custom development repeating the features that already provided by the slider. And that’s something we can’t provide here in the forum.

I know that you’re not referring to the background image, but it’s still the recommended implementation for the slider since there are text layers. With the slider, background or not, it will be responsive and the aspect ratio responsiveness always depends on how you configured the slider. Let’s say for example, your image size is 1200x768 (again, this isn’t about being a background or not), let’s check this tool for the aspect ratio

https://andrew.hedges.name/experiments/aspect_ratio/

And it says, the aspect ratio of 1200x768 is 25 : 16, now back to slider, you can configure your slider layer size to match it. Let’s input those given sizes to W2 fields, like this

1200, hence, H2 will be 768

1024, hence, H2 will be 655

778, hence, H2 will be 498

480, hence, H2 will be 307

And those sizes that match your 1200x768 image size. Please note aspect ratio means the changes of width relative to height in the same ratio, that’s why you mustn’t use the FULLSCREEN option. Fullscreen follows the screen width and height instead of the sizes you have configured.

Yes, you can implement the simple featured image, but note that you can’t implement text animation and text scaling, nor text offset responsiveness.

Thanks!

[guybower1]

cheers Rad. Thanks so much for your reply.

That actually clarifies things quite a bit re the slider. I have now adjusted things to match the image size with an aspect ration of 3:2.

I tried another route for a little while: the one suggested by Christian. I created another bar above the main navigation bar and put the image in there as a background image. I tried some slide-down code to transition the text

<style style="text/css">
div.slide-down {
  width:100%;
  overflow:hidden;
}
div.slide-down p {
  animation: 10s slide-down;
  margin-top:0%;
}

@keyframes slide-down {
  from {
    margin-top: -100%;
    height: 300%; 
  }

  to {
    margin-top: 0%;
    height: 100%;
  }
}
</style>

<div class="slide-down">
<p>TAKE YOUR FOOD TOUR<BR>TO THE NEXT LEVEL</p>
</div>

and it was OK, but couldn’t get it to come from our of sight to the centre of the image, so I have gone back to hard coding the image in CSS and using the slider. The slider at least positions correctly through all screen sizes now, so that is great. The image is also perfect through XL and LG, but MD, SM and XS all have the topbar sitting below the image, rather than on top of it as it does with the larger sizes. It actually appears to be sitting under the image by exactly the height of the topbar.

I tried creating a negative bottom margin on the image using this

body {
    background-image: url(http://wordpress-102462-558755.cloudwaysapps.com/wp-content/uploads/2017/11/Sweet-Lady-website@2x-1.jpg);
    background-size: 100% auto;
    background-position: 0 0;
    margin-bottom: -2.65em;
    background-repeat: no-repeat;
}

Maybe it needs to be a media query instead.

Any thoughts on just this last piece of the puzzle?

Thanks so much

[christian]

Hey @guybower1,

If you know how to code media queries, that would also be a solution. Alternatively, you can reposition the text per screen size in Slider Revolution. Please see this documentation https://www.themepunch.com/slider-revolution/size-position/

Hope that helps.

[guybower1]

hi Christian

coding the media query is no issue, but it is not the text I am trying to adjust. That works perfectly in the slider. It is the topbar in MD, SM & XS. It does not sit on top of the background image as it does in XL & LG.

Here is the media query I coded to set a negative bottom margin on the background image, but it had no effect

@media only screen and (max-width: 767px) {
  body {
    background-image: url(http://wordpress-102462-558755.cloudwaysapps.com/wp-content/uploads/2017/11/Sweet-Lady-website@2x-1.jpg);
    background-size: 100% auto;
    margin-bottom: -2.65em;
    background-position: 0 0;
    background-repeat: no-repeat;
}
}

As you can see in the image in the previous post, the topbar is sitting under the image by the height of the topbar, which is 2.65em. Setting the negative margin does not seem to affect the position of the topbar relative to the image.

I am able to adjust the position of the background image to cover the topbar, but then that same height is left as a gap at the top of the image.

How is it possible to force the topbar to sit over the top of the image, as it does on the larger screen sizes?

cheers

[christian]

Hey @guybower1,

It’s not the top bar that is the issue. The issue is still an aspect ratio mismatch between your background image and the area you’re covering. Your background image covers desktop sizes only because it’s aspect ratio is wide landscape. It can’t cover tablet screens as the area now is close to a square. See the screenshots below.

The solution is to use a background image with 7:5.5 aspect ratio.

If you want, you can use your media query to show a different background image for mobile.

Hope that helps.

[guybower1]

hi Christian

Thanks so much for your reply

OK, go it. Easy enough to alter the image and save a second copy to cover those screen sizes.

I tried this as well. I added a media query for each of the 3 screen sizes which were giving grief and now it seems to show without gaps; just a slight cropping of the image at the sides

@media only screen and (max-width: 979px) {
  body {
    background-image: url(http://wordpress-102462-558755.cloudwaysapps.com/wp-content/uploads/2017/11/Sweet-Lady-website@2x-1.jpg);
    background-size: 1050px auto;
    background-position: 0 0;
    background-repeat: no-repeat;
}
}
@media only screen and (max-width: 767px) {
  body {
    background-image: url(http://wordpress-102462-558755.cloudwaysapps.com/wp-content/uploads/2017/11/Sweet-Lady-website@2x-1.jpg);
    background-size: 830px auto;
    background-position: 0 0;
    background-repeat: no-repeat;
}
}
@media only screen and (max-width: 480px) {
  body {
    background-image: url(http://wordpress-102462-558755.cloudwaysapps.com/wp-content/uploads/2017/11/Sweet-Lady-website@2x-1.jpg);
    background-size: 541px auto;
    background-position: 0 0;
    background-repeat: no-repeat;
}
}

cheers

[nabeel]

We’re glad you sorted it out @guybower1

Cheers!