Rate this docs

Vue Background Image

Vue Background Image - Bootstrap 4 & Material Design

Vue Bootstrap background image is an illustration chosen by a user placed behind all other objects on the website. It may be full or partially visible.


Full Page Background Image

See live preview


        <div class="bg"></div>

        <p class="py-5 text-center">
          This example creates a full page background image.
          Try to resize the browser window to see how it always will cover the full screen (when scrolled to top),
          and that it scales nicely on all screen sizes.
        </p>

      


        body, html {
          height: 100%;
        }
        .bg {
          /* The image used */
          background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");

          /* Full height */
          height: 100%;

          /* Center and scale the image nicely */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }

      

Half Page Background Image

See live preview


<div class="bg"></div>

<p class="py-5 text-center">
  This example creates a half page background image.
  Try to resize the browser window to see how it always will cover the full screen (when scrolled to top),
  and that it scales nicely on all screen sizes.
</p>

      


        body, html {
          height: 100%;
        }
        .bg {
          /* The image used */
          background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(11).jpg");

          /* Half height */
          height: 50%;

          /* Center and scale the image nicely */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }

      

Background image layout - first option

See live preview


        <div>
          <!--Navbar-->
          <mdb-navbar navStyle="margin-top: 60px" :color="'primary'" position="top" dark href="#" transparent scrolling>
            <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
            <mdb-navbar-collapse style="max-width: 1140px">
              <mdb-navbar-nav>
                <mdb-navbar-item href="#" waves-fixed active>Home</mdb-navbar-item>
                <mdb-navbar-item href="#" waves-fixed>Link</mdb-navbar-item>
                <mdb-navbar-item href="#" waves-fixed>Profile</mdb-navbar-item>
              </mdb-navbar-nav>
              <!--Search form -->
              <form>
                <mdb-input type="text" class="text-white f-flex" placeholder="Search" aria-label="Search" navInput waves waves-fixed/>
              </form>
              <!--/.Search form -->
            </mdb-navbar-collapse>
          </mdb-navbar>
          <!--/.Navbar-->
          <!--View-->
          <mdb-view>
            <mdb-mask class="gradient d-flex justify-content-center align-items-center">
              <mdb-container>
                <mdb-row>
                  <div class="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                    <h1 class="h1-responsive font-weight-bold mt-sm-5">Make purchases with our app </h1>
                    <hr class="hr-light"/>
                    <h6 class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt
                    dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae
                    iste.</h6>
                    <mdb-btn color="white">Download</mdb-btn>
                    <mdb-btn outline="white">Learn More</mdb-btn>
                  </div>
                  <mdb-column md="6" xl="5" class="mt-xl-5">
                    <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.png" class="img-fluid"/>
                  </mdb-column>
                </mdb-row>
              </mdb-container>
            </mdb-mask>
          </mdb-view>
          <!--/.View-->

          <mdb-container>
            <mdb-row class="py-5">
              <mdb-column md="12" class="text-center">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
              </mdb-column>
            </mdb-row>
          </mdb-container>
        </div>

      

          import { mdbContainer, mdbRow, mdbColumn, mdbNavbar mdbNavbarCollapse, mdbNavbarNav, mdbNavbarItem,mdbInput, mdbView,mdbMask,mdbBtn,mdbNavbarBrand } from 'mdbvue';

          export default {
            name: 'AppPage',
            components: {
              mdbContainer,
              mdbRow,
              mdbColumn,
              mdbNavbar,
              mdbNavbarCollapse,
              mdbNavbarNav,
              mdbNavbarItem,
              mdbmdbInput,
              mdbView,
              mdbMask,
              mdbBtn,
              mdbNavbarBrand
            }
          }

      

        .navbar {
          transition: 1s;
        }
        .navbar .md-form {
          margin: 0;
        }
        .top-nav-collapse {
          background-color: #424f95 !important;
        }
        @media (max-width: 990px){
          .navbar {
            background-color: #424f95 !important;
          }
        }
        .view {
          background-image: url('https://mdbootstrap.com/img/Photos/Others/architecture.jpg');
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          height: calc(100vh - 60px);
        }
        .gradient {
          background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
          background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
          background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.7)), to(rgba(29, 210, 177, 0.7)));
          background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
          background: linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
        }
        h6 {
            line-height: 1.7;
        }
      

Background image layout - second option

See live preview


          <div class="classic-form-page">
              <mdb-navbar navStyle="margin-top: 60px" :color="'primary'" position="top" dark href="#" transparent scrolling>
                <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
                <mdb-navbar-collapse style="max-width: 1140px">
                  <mdb-navbar-nav>
                    <mdb-navbar-item href="#" waves-fixed active>Home</mdb-navbar-item>
                    <mdb-navbar-item href="#" waves-fixed>Features</mdb-navbar-item>
                    <mdb-navbar-item href="#" waves-fixed>Pricing</mdb-navbar-item>
                  </mdb-navbar-nav>
                  <!-- Search form -->
                  <form>
                    <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
                  </form>
                </mdb-navbar-collapse>
              </mdb-navbar>

              <mdb-view>
                <mdb-mask class="d-flex gradient justify-content-center align-items-center">
                  <mdb-container>
                    <mdb-row>
                      <div class="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                        <h1 class="h1-responsive font-weight-bold">Sign up right now! </h1>
                        <hr class="hr-light"/>
                        <h6 class="mb-4">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat!
                          Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.
                        </h6>
                        <mdb-btn outline="white" color="white">Learn More</mdb-btn>
                      </div>
                      <mdb-column md="6" xl="5" class="mb-4">
                        <mdb-card id="classic-card">
                          <mdb-card-body class="z-depth-2 white-text">
                            <h3 class="text-center"><mdb-icon icon="user"/> Register:</h3>
                            <hr class="hr-light"/>
                            <mdb-input label="Your name" labelColor="white" icon="user"/>
                            <mdb-input label="Your email" labelColor="white" icon="envelope"/>
                            <mdb-input label="Your password" labelColor="white" icon="lock" type="password"/>
                            <div class="text-center mt-4 black-text">
                              <mdb-btn color="indigo">Sign Up</mdb-btn>
                              <hr class="hr-light"/>
                              <div class="text-center d-flex justify-content-center white-label">
                                <a class="p-2 m-2">
                                  <mdb-icon icon="twitter" class="white-text"/>
                                </a>
                                <a class="p-2 m-2">
                                  <mdb-icon icon="linkedin" class="white-text"/>
                                </a>
                                <a class="p-2 m-2">
                                  <mdb-icon icon="instagram" class="white-text"/>
                                </a>
                              </div>
                            </div>
                          </mdb-card-body>
                        </mdb-card>
                      </mdb-column>
                    </mdb-row>
                  </mdb-container>
                </mdb-mask>
              </mdb-view>

              <mdb-container>
                <mdb-row class="py-5">
                  <mdb-column md="12" class="text-center">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                  </mdb-column>
                </mdb-row>
              </mdb-container>
            </div>

          

              import { mdbContainer, mdbRow, mdbColumn, mdbNavbar, mdbNavbarItem, mdbNavbarNav, mdbNavbarCollapse, mdbView, mdbMask, mdbBtn, mdbCard, mdbCardBody, mdbInput, mdbIcon, mdbNavbarBrand } from 'mdbvue';

              export default {
                name: 'ClassicFormPage',
                components: {
                  mdbContainer,
                  mdbRow,
                  mdbColumn,
                  mdbNavbar,
                  mdbNavbarItem,
                  mdbNavbarNav,
                  mdbNavbarCollapse,
                  mdbView,
                  mdbMask,
                  mdbBtn,
                  mdbCard,
                  mdbCardBody,
                  mdbInput,
                  mdbIcon,
                  mdbNavbarBrand
                }
              };
          

              .classic-form-page .view {
                background-image: url('https://mdbootstrap.com/img/Photos/Others/images/91.jpg');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                height: calc(100vh - 60px);
              }

              .classic-form-page .gradient {
                background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
                background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
              }

              .classic-form-page .card {
                background-color: rgba(126, 123, 215, 0.2);
              }

              .classic-form-page h6 {
                line-height: 1.7;
              }

              .classic-form-page .navbar {
                transition: background .5s ease-in-out,padding .5s ease-in-out;
              }

              .classic-form-page .navbar .md-form {
                margin: 0;
              }

              .top-nav-collapse {
                background: #424f95 !important;
              }

              @media (max-width: 768px) {
                .classic-form-page .navbar:not(.top-nav-collapse) {
                    background: #424f95 !important;
                }
              }

              .classic-form-page label {
                color: #fff!important;
              }
          

Background video layout

See live preview


          <div class="classic-form-page">
              <mdb-navbar navStyle="margin-top: 60px" :color="'primary'" position="top" dark href="#" transparent scrolling>
                <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
                <mdb-navbar-collapse style="max-width: 1140px">
                  <mdb-navbar-nav>
                    <mdb-navbar-item href="#" waves-fixed active>Home</mdb-navbar-item>
                    <mdb-navbar-item href="#" waves-fixed>Features</mdb-navbar-item>
                    <mdb-navbar-item href="#" waves-fixed>Pricing</mdb-navbar-item>
                  </mdb-navbar-nav>
                  <!-- Search form -->
                  <form>
                    <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
                  </form>
                </mdb-navbar-collapse>
              </mdb-navbar>
              <!-- View -->
              <mdb-view>
                <mdb-mask class="d-flex gradient justify-content-center align-items-center">
                  <mdb-container>
                    <mdb-row>
                      <div class="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                        <h1 class="h1-responsive font-weight-bold">Sign up right now! </h1>
                        <hr class="hr-light"/>
                        <h6 class="mb-4">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat!
                          Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.
                        </h6>
                        <mdb-btn outline="white" color="white">Learn More</mdb-btn>
                      </div>
                      <mdb-column md="6" xl="5" class="mb-4">
                        <mdb-card id="classic-card">
                          <mdb-card-body class="z-depth-2 white-text">
                            <h3 class="text-center"><mdb-icon icon="user"/> Register:</h3>
                            <hr class="hr-light"/>
                            <mdb-input label="Your name" labelColor="white" icon="user"/>
                            <mdb-input label="Your email" labelColor="white" icon="envelope"/>
                            <mdb-input label="Your password" labelColor="white" icon="lock" type="password"/>
                            <div class="text-center mt-4 black-text">
                              <mdb-btn color="indigo">Sign Up</mdb-btn>
                              <hr class="hr-light"/>
                              <div class="text-center d-flex justify-content-center white-label">
                                <a class="p-2 m-2">
                                  <mdb-icon icon="twitter" class="white-text"/>
                                </a>
                                <a class="p-2 m-2">
                                  <mdb-icon icon="linkedin" class="white-text"/>
                                </a>
                                <a class="p-2 m-2">
                                  <mdb-icon icon="instagram" class="white-text"/>
                                </a>
                              </div>
                            </div>
                          </mdb-card-body>
                        </mdb-card>
                      </mdb-column>
                    </mdb-row>
                  </mdb-container>
                </mdb-mask>
              </mdb-view>
              <!-- /View -->

              <!-- Lower Part -->
              <container>
                <row class="py-5">
                  <column md="12" class="text-center">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                  </column>
                </row>
              </container>
              <!-- /Lower Part -->

            </div>

          

              import { mdbContainer, mdbRow, mdbColumn, mdbNavbar, mdbNavbarItem, mdbNavbarNav, mdbNavbarCollapse, mdbView, mdbMask, mdbBtn, mdbCard, mdbCardBody, mdbInput, mdbIcon, mdbNavbarBrand } from 'mdbvue';

              export default {
                name: 'ClassicFormPage',
                components: {
                  mdbContainer,
                  mdbRow,
                  mdbColumn,
                  mdbNavbar,
                  mdbNavbarItem,
                  mdbNavbarNav,
                  mdbNavbarCollapse,
                  mdbView,
                  mdbMask,
                  mdbBtn,
                  mdbCard,
                  mdbCardBody,
                  mdbmdbInput,
                  mdbIcon,
                  mdbmdbNavbarBrand
                }
              };
          

              .classic-form-page .view {
                background-image: url('https://mdbootstrap.com/img/Photos/Others/images/91.jpg');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                height: calc(100vh - 60px);
              }

              .classic-form-page .gradient {
                background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
                background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
              }

              .classic-form-page .card {
                background-color: rgba(126, 123, 215, 0.2);
              }

              .classic-form-page h6 {
                line-height: 1.7;
              }

              .classic-form-page .navbar {
                transition: background .5s ease-in-out,padding .5s ease-in-out;
              }

              .classic-form-page .navbar .md-form {
                margin: 0;
              }

              .top-nav-collapse {
                background: #424f95 !important;
              }

              @media (max-width: 768px) {
                .classic-form-page .navbar:not(.top-nav-collapse) {
                    background: #424f95 !important;
                }
              }

              .classic-form-page label {
                color: #fff!important;
              }
          

Cards with background image MDB Pro component

Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project


              <mdb-card class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg)">
                <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                  <div>
                    <h5 class="pink-text"><fa icon="pie-chart" /> Marketing</h5>
                    <mdb-card-title tag="h3" class="pt-2"><strong>This is card title</strong></mdb-card-title>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                       optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                       Odit sed qui, dolorum!.
                    </p>
                    <btn color="pink" icon="clone left">View project</btn>
                  </div>
                </div>
              </mdb-card>

          

              import { mdbCard, mdbCardTitle, mdbBtn } from 'mdbvue';

              export default {
                name: 'ClassicFormPage',
                components: {
                  mdbCard,
                  mdbCardTitle,
                  mdbBtn
                }
              };
          

Project section with background image cards MDB Pro component

Our best projects

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.

Travel

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project
Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project
Entertainment

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project


              <section class="text-center my-5">
                <h2 class="h1-responsive font-weight-bold my-5">Our best projects</h2>
                  <p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>
                  <mdb-row>
                    <mdb-column md="12" class="mb-4">
                      <mdb-card class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2832%29.jpg)">
                        <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
                          <div>
                            <h6 class="purple-text">
                              <mdb-icon icon="plane"/><strong> Travel</strong>
                            </h6>
                            <h3 class="py-3 font-weight-bold">
                              <strong>This is card title</strong>
                            </h3>
                            <p class="pb-3">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                              Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                              Odit sed qui, dolorum!
                            </p>
                            <mdb-btn color="secondary" rounded size="md" icon="clone left"> View project</mdb-btn>
                          </div>
                        </div>
                      </mdb-card>
                    </mdb-column>
                    <mdb-column md="6" class="md-0 mb-4">
                      <mdb-card class="card-image" style="backgroundImage: url(https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20%2873%29.jpg)">
                        <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
                          <div>
                            <h6 class="pink-text">
                              <mdb-icon icon="pie-chart"/><strong> Marketing</strong>
                            </h6>
                            <h3 class="py-3 font-weight-bold">
                              <strong>This is card title</strong>
                            </h3>
                            <p class="pb-3">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                              Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                              Odit sed qui, dolorum!
                            </p>
                            <mdb-btn color="pink" rounded size="md" icon="clone" iconClass="left"> View project</mdb-btn>
                          </div>
                        </div>
                      </mdb-card>
                    </mdb-column>
                    <mdb-column md="6" class="md-0 mb-4">
                      <mdb-card class="card-image" style="backgroundImage: url(https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20%2873%29.jpg)">
                        <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
                          <div>
                            <h6 class="green-text">
                              <mdb-icon icon="eye"/><strong> Entertainment</strong>
                            </h6>
                            <h3 class="py-3 font-weight-bold">
                              <strong>This is card title</strong>
                            </h3>
                            <p class="pb-3">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                              Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                              Odit sed qui, dolorum!
                            </p>
                            <mdb-btn color="success" rounded size="md"><mdb-icon icon="clone" iconClass="left"/> View project</mdb-btn>
                          </div>
                        </div>
                      </mdb-card>
                    </mdb-column>
                  </mdb-row>
                </section>
          

              import { mdbRow, mdbColumn, mdbCard, mdbIcon, mdbCardTitle, mdbBtn } from 'mdbvue';

              export default {
                name: 'ClassicFormPage',
                components: {
                  mdbRow,
                  mdbColumn,
                  mdbCard,
                  mdbIcon,
                  mdbCardTitle,
                  mdbBtn
                }
              };