Implementation of background image


Topic: Implementation of background image

univlearning pro asked 5 years ago

Hi,

I was reading this example for background image:

https://mdbootstrap.com/docs/angular/css/background-image/#v-3

And I really liked it, but there are some questions that I want to make you:

  1. Is it possible to put a footer below the background-image content?, I want to add the company's info inside a footer, and I see that you put some Lorem ipsum after the baground image.
  2. For some screen resolutions I see this overlap:

enter image description here

Any idea to solve it?

Thanks, I will be attentive.


Bartosz Termena staff answered 5 years ago

Dear @univlearning

1) Of course it is possible 2) Look at my example below, you can try to add text like this:

<!--Main Navigation-->
<header class="intro-header">
  <!--Navbar-->
  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
    <mdb-navbar-brand>
      <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>MDB</strong></a>
    </mdb-navbar-brand>
    <links>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Profile</a>
        </li>
      </ul>
      <form class="form-inline waves-light" mdbWavesEffect>
        <div class="md-form mt-0">
          <input
            class="form-control mr-sm-2"
            type="text"
            placeholder="Search"
            aria-label="Search"
          />
        </div>
      </form>
    </links>
  </mdb-navbar>

  <!-- Intro Section -->
  <div
    class="view jarallax"
    data-jarallax='{"speed": 0.2}'
    style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.jpg);"
  >
    <div class="full-bg-img mask rgba-black-light">
      <div class="container ">
        <div class="row pt-5 mt-3 w-100">
          <div class="col-md-12">
            <div class="text-center mt-5 py-5">
              <h2
                class="h1 h1-reponsive white-text font-up font-bold mb-3 wow fadeInDown"
                data-wow-delay="0.3s"
              >
                <strong>Minimalist intro</strong>
              </h2>
              <hr class="hr-light mt-4 wow fadeInDown" data-wow-delay="0.4s" />
              <h5 class="font-up mb-5 white-text wow fadeInDown" data-wow-delay="0.4s">
                <strong>Photography & design</strong>
              </h5>
              <a
                mdbBtn
                color="white"
                outline="true"
                class="wow fadeInDown waves-light"
                data-wow-delay="0.4s"
                mdbWavesEffect
                >portfolio</a
              >
              <a
                mdbBtn
                color="white"
                outline="true"
                class="wow fadeInDown waves-light"
                data-wow-delay="0.4s"
                mdbWavesEffect
                >About me</a
              >
            </div>
          </div>
          <div class="col-md-12 mt-5">
            <div class="text-center white-text">
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. At cupiditate quod enim,
                beatae obcaecati perferendis labore saepe! Nobis consectetur vel delectus optio.
                Tenetur eveniet ad, fuga maxime facere incidunt eaque.
              </p>

              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. At cupiditate quod enim,
                beatae obcaecati perferendis labore saepe! Nobis consectetur vel delectus optio.
                Tenetur eveniet ad, fuga maxime facere incidunt eaque.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!--Main Navigation--><!-- Footer -->
<footer class="page-footer font-small blue">
  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">
    © 2018 Copyright:
    <a href="https://mdbootstrap.com/education/angular/"> MDBootstrap.com</a>
  </div>
  <!-- Copyright -->
</footer>
<!-- Footer -->

styles.scss

.intro-header {
    height: unset !important;
  }
  .top-nav-collapse {
    background-color: #78909c !important;
  }
  .view {
    height: 100vh !important;
  }
  .navbar:not(.top-nav-collapse) {
    background: transparent !important;
  }
  @media (max-width: 768px) {
    .navbar:not(.top-nav-collapse) {
      background: #78909c !important;
    }
  }
  h1 {
    letter-spacing: 8px;
  }
  h5 {
    letter-spacing: 3px;
  }
  .hr-light {
    border-top: 3px solid #fff;
    width: 80px;
  }
  @media (max-width: 740px) {
    .full-height,
    .full-height body,
    .full-height header,
    .full-height header .view {
      height: 700px;
    }
  }

Hope it helps!

Best Regards, Bartosz.


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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.5.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes