Docs

[jquinn33]

Hi! I’m trying to get a background image to align to the top, but it is being covered by the header so the very top of the image can’t be seen as on other pages. I’ve tried several of the suggestions out here for top alignment, but none seem to work. Is there some css that might help?

Thank you always for your tremendous support out here! 🙂

[jquinn33]

This reply has been marked as private.

[Joao]

Hi There,

Your page is password protected, please provide the password in order that we can take a closer look.

Thanks

[jquinn33]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back! You can add this under Custom > CSS in the Customizer.

.backstretch {
    margin-top: 100px !important;
}

Hope this helps.

Cheers!

[jquinn33]

Thank you, Rupok! We had tried that before and while it does bump the background image below the header and looks great, once you scroll the page and the header resizes to show just the menu, you see a gap between the top of the background image and the menu. It doesn’t seem to do that on the Cornerstone pages. Not sure if there is another solution, but if not this will suffice since we are using such a dark background against black! 🙂

[Rupok]

Hi there,

Thanks for writing back. As you are using dark background so the gap is not visible. Still I don’t like if you have issue on this. So here goes some additional solution.
You can add this under Custom > JavaScript in the Customizer.

jQuery( function($) {    
      $(window).on("scroll", function () {    
    if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
      $('.backstretch').addClass('top-margin');
                }else {
                        $('.backstretch').removeClass('top-margin');
                }   
  }).scroll();
});

And then add this CSS with the existing CSS :

.backstretch.top-margin {
    margin-top: 50px !important;
}

So the main idea is to reduce the margin when you have the narrow Navbar.

Cheers!

[jquinn33]

Wow! You guys are simply the best! Thank you for not settling for “good enough!!” 🙂 I did add the JS and CSS (keeping the original .backstretch CSS). This didn’t seem to make a difference. Just wanted to let you know for others who find this solution useful as well! 🙂 THANK YOU again!!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[jquinn33]

Just in case my message was misread, just wanted to clarify that the JS and CSS didn’t work. 😉

[Christopher]

Hi there,

The code is there and it works fine, please see the attachment.

Thanks.

[jquinn33]

This reply has been marked as private.

[Joao]

Hi There,

You sir have a good eye!

You could try changing the value of 50px for something different

.backstretch.top-margin {
    margin-top: 40px !important;
}

Let us know how it goes,

If that does not work please provide your login credentials so we can take a closer look.

Cheers

[jquinn33]

This reply has been marked as private.

[Rad]

Hi there,

I think it’s because these fixes only work on specific screen size, and it’s the screen we’re checking it. And in customizer, it’s narrower than what’s in the front hence if we’ll fix this in customizer’s view then it will not work on other views like on the front page, or on other devices views.

And the layout and content change its dimension depending on device screen size, the narrower the taller. And the tall content creates gap vertically. And since the background image is fixed on its position then it doesn’t respond to content changes.

How about making your image taller too and removes the above custom CSS.

Thanks!

[Author]

Posts