Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Background image overlap using Full Page Intro with a non-fixed Navbar

Travis W free asked 5 years ago

Good evening everyone. I don't have much experience with CSS and my google searches didn't yield any good results. Anyways, I copy and pasted the html and css with no variations for full page intro with a non-fixed navbar.

On desktop everything looks as expected:

enter image description here

However, when I switch to mobile view the background-image seems to overlap the text:

enter image description here

When I expand the toggler the issue gets even worse:

enter image description here

I should also add that when using the live preview on the site everything works as expected.

Thank you for the advice,

Travis

Travis W free commented 5 years ago

I figured out a solution! I just took the image out of the header and placed it in the body.

Marta Wierzbicka staff answered 5 years ago

Hi,

there is a bug in our example. Thank you for noticing this and inform us. Please, try this code: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1408459#html-tab-view.

Best, Marta

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Mobile
  • Browser: Chrome / Opera
  • OS: Ubuntu x64
  • Provided sample code: No
  • Provided link: No
Tags
overlap background-image full-page-intro
About author
Travis W
5Support score
1Questions 0Answers 0Snippets