Navigation
Archive / Trying to get div and background image on top of sticky, abolsute positioned nav
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • September 8, 2016 at 7:05 pm #1167185
    databell
    Participant

    I;m currently having issues with my homepage design (https://jkmurphyadvisors.com/dev/) as the client wants to replicate the design of the top part of the homepage of the X Theme site where the div (#x-section-9999) is above the nav and the nav scrolls up to the top and sticks. That part with the nav I think I have done successfully. The problem is the div with the background image. Actually, two problems. The first? The background image doesn’t display at all and secondly, the divs that should be underneath the nav are instead above it, making for quite a mess. Anyway I can solve this so it looks like the X site example?

    September 9, 2016 at 1:28 am #1167587
    Rupok
    Member

    Hi there,

    Thanks for writing in! There is a better approach to achieve this. You can create a Slider (with Revolution Slider maybe?) and assign this on “Above Masthead”. It would be easier to manage like this.

    Cheers!

    September 9, 2016 at 2:58 am #1167682
    databell
    Participant

    But I don’t want to use RevSkider. It’s a lousy slider, gets hit up hackers a lot, and why should I have to load a lot of scripts when all I want to do is display a JPEG? You aren’t using RevSlider on your demo site. At least not in that area. I checked the code.

    September 9, 2016 at 4:04 am #1167733
    Rad
    Moderator

    Hi there,

    Your section has a background and it’s working. The problem is it has no content, background image depends on container’s size, and container’s size depends on its content.

    What you could do is add padding-bottom: 100%; on your section’s style attribute. Even with no content, it will at least has a height. The good thing with slider, it will handle all aspect of responsiveness even it’s just a single image.

    With just raw div and section, you’ll have to go through CSS customization to achieve it.

    Thanks!

    September 9, 2016 at 2:56 pm #1168490
    databell
    Participant

    Yea, the paddong-bottom solution worked great. Thanks for that. Definitely learned something today.

    So one more thing. Now the div is too big. It’s basically using the entire size of the image as the background. How do I limit to the only the height and width of the browser screen?

    September 10, 2016 at 12:39 am #1168941
    Rue Nel
    Moderator

    Hello There,

    Thanks for the updates! To limit the height and width of the div in relation to the browser screen, you may use an inline css for the div like this: min-width: 100vh; min-height: 100vh;.

    Hope this helps.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1167185 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>