Rate this docs

React Background Image

React Background Image - Bootstrap 4 & Material Design

React 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

          import React from "react";
          import './index.css';


          const BackgroundImagePage = () => {
            return (
                <div className="bg"></div>
            );
          }

          export default BackgroundImagePage;
      

          body, html {
          height: 100%;
          }
          .bg {
          background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
          height: 100vh;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          }
      

Half Page Background Image

See live preview


        import React from "react";
        import './index.css';


        const BackgroundImagePage = () => {
        return (
          <div className="bg"></div>
        );
        }
      


      body, html {
        height: 100%;
      }
      .bg {
        background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(11).jpg");
        height: 50vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      

Background image layout - first option

See live preview

        import React from "react";
        import { BrowserRouter as Router } from "react-router-dom";
        import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBMask,
        MDBRow, MDBCol, MDBBtn, MDBView, MDBContainer, MDBFormInline } from "mdbreact";
        import "./index.css";

        class AppPage extends React.Component {
        state = {
          collapsed: false
        };

        handleTogglerClick = () => {
        this.setState({
          collapsed: !this.state.collapsed
        });
        };

        render() {
        const overlay = (
          <div id="sidenav-overlay" style={{ backgroundColor: "transparent" }} onClick={this.handleTogglerClick} />
        );
        return (
        <div id="apppage">
          <Router>
            <div>
              <MDBNavbar color="primary-color" dark expand="md" fixed="top" scrolling transparent>
                <MDBContainer>
                  <MDBNavbarBrand>
                    <strong className="white-text">MDB</strong>
                  </MDBNavbarBrand>
                  <MDBNavbarToggler onClick={this.handleTogglerClick} />
                  <MDBCollapse isOpen={this.state.collapsed} navbar>
                    <MDBNavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#!">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Link</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#!">Profile</MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                    <MDBNavbarNav right>
                      <MDBNavItem>
                        <MDBFormInline waves>
                          <div className="md-form my-0">
                            <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                          </div>
                        </MDBFormInline>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBContainer>
              </MDBNavbar>
              {this.state.collapsed && overlay}
            </div>
          </Router>
          <MDBView>
            <MDBMask className="d-flex justify-content-center align-items-center gradient">
              <MDBContainer>
                <MDBRow>
                  <div className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                    <h1 className="h1-responsive font-weight-bold mt-sm-5">
                      Make purchases with our app{" "}
                    </h1>
                    <hr className="hr-light" />
                    <h6 className="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>
                    <MDBBtn color="white">Download</MDBBtn>
                    <MDBBtn outline color="white">
                      Learn More
                    </MDBBtn>
                  </div>
                  <MDBCol md="6" xl="5" className="mt-xl-5">
                    <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.png" alt="" className="img-fluid" />
                  </MDBCol>
                </MDBRow>
              </MDBContainer>
            </MDBMask>
          </MDBView>

          <MDBContainer>
            <MDBRow className="py-5">
              <MDBCol md="12" className="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>
              </MDBCol>
            </MDBRow>
          </MDBContainer>
        </div>
        );
        }
        }

        export default AppPage;
      

          #apppage .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%);
          }

          #apppage .view {
          background-image: url('https://mdbootstrap.com/img/Photos/Others/architecture.jpg');
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          height: 100vh;
          }

          #apppage h6 {
          line-height: 1.7;
          }
      

Background image layout - second option

See live preview

        import React from "react";
        import { BrowserRouter as Router } from "react-router-dom";
        import {
        MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBMask, MDBRow,
        MDBCol, MDBIcon,
        MDBBtn, MDBView, MDBContainer, MDBCard, MDBCardBody, MDBInput, MDBFormInline
        } from "mdbreact";
        import "./index.css";

        class ClassicFormPage extends React.Component {
          state = {
            collapseID: ""
          };

          toggleCollapse = collapseID => () =>
            this.setState(prevState => ({
            collapseID: prevState.collapseID !== collapseID ? collapseID : ""
          }));

          render() {
            const overlay = (
              <div id="sidenav-overlay" style={{ backgroundColor: "transparent" }} onClick={this.toggleCollapse("navbarCollapse")} />
            );
            return (
            <div id="classicformpage">
              <Router>
                <div>
                  <MDBNavbar dark expand="md" fixed="top">
                    <MDBContainer>
                      <MDBNavbarBrand>
                        <strong className="white-text">MDB</strong>
                      </MDBNavbarBrand>
                      <MDBNavbarToggler onClick={this.toggleCollapse("navbarCollapse")} />
                      <MDBCollapse id="navbarCollapse" isOpen={this.state.collapseID} navbar>
                        <MDBNavbarNav left>
                          <MDBNavItem active>
                            <MDBNavLink to="#!">Home</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#!">Link</MDBNavLink>
                          </MDBNavItem>
                          <MDBNavItem>
                            <MDBNavLink to="#!">Profile</MDBNavLink>
                          </MDBNavItem>
                        </MDBNavbarNav>
                        <MDBNavbarNav right>
                          <MDBNavItem>
                            <MDBFormInline waves>
                              <div className="md-form my-0">
                                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                              </div>
                            </MDBFormInline>
                          </MDBNavItem>
                        </MDBNavbarNav>
                      </MDBCollapse>
                    </MDBContainer>
                  </MDBNavbar>
                  {this.state.collapseID && overlay}
                </div>
              </Router>

              <MDBView>
                <MDBMask className="d-flex justify-content-center align-items-center gradient">
                  <MDBContainer>
                    <MDBRow>
                      <div className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                        <h1 className="h1-responsive font-weight-bold">
                          Sign up right now!{" "}
                        </h1>
                        <hr className="hr-light" />
                        <h6 className="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>
                        <MDBBtn outline color="white">
                          Learn More
                        </MDBBtn>
                      </div>
                      <MDBCol md="6" xl="5" className="mb-4">
                        <MDBCard id="classic-card">
                          <MDBCardBody className="z-depth-2 white-text">
                            <h3 className="text-center">
                              <MDBIcon icon="user" /> Register:
                            </h3>
                            <hr className="hr-light" />
                            <MDBInput label="Your name" icon="user" />
                            <MDBInput label="Your email" icon="envelope" />
                            <MDBInput label="Your password" icon="lock" type="password" />
                            <div className="text-center mt-4 black-text">
                              <MDBBtn color="indigo">Sign Up</MDBBtn>
                              <hr className="hr-light" />
                              <div className="text-center d-flex justify-content-center white-label">
                                <a href="#!" className="p-2 m-2">
                                  <MDBIcon icon="twitter" className="white-text" />
                                </a>
                                <a href="#!" className="p-2 m-2">
                                  <MDBIcon icon="linkedin" className="white-text" />
                                </a>
                                <a href="#!" className="p-2 m-2">
                                  <MDBIcon icon="instagram" className="white-text" />
                                </a>
                              </div>
                            </div>
                          </MDBCardBody>
                        </MDBCard>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                </MDBMask>
              </MDBView>

              <MDBContainer>
                <MDBRow className="py-5">
                  <MDBCol md="12" className="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>
                  </MDBCol>
                </MDBRow>
              </MDBContainer>
            </div>
            );
          }
        }

        export default ClassicFormPage;

      

              .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: 100vh;
              }

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

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

              h6 {
              line-height: 1.7;
              }

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

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

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

              label {
              color: #fff!important;
              }
      

Background video layout

See live preview


          import React from "react";
          import { BrowserRouter as Router } from "react-router-dom";
          import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBMask,
          MDBRow, MDBCol, MDBIcon, MDBBtn, MDBView, MDBContainer } from "mdbreact";
          import "./index.css";

          class VideoBackgroundPage extends React.Component {
          state = {
          collapseID: ""
          };

          toggleCollapse = collapseID => () =>
          this.setState(prevState => ({
          collapseID: prevState.collapseID !== collapseID ? collapseID : ""
          }));

          render() {
          const overlay = (
          <div id="sidenav-overlay" style={{ backgroundColor: "transparent" }} onClick={this.toggleCollapse("navbarCollapse")} />
          );
          return (
          <div id="videobackground">
            <Router>
              <div>
                <MDBNavbar dark expand="md" fixed="top">
                  <MDBContainer>
                    <MDBNavbarBrand>
                      <span className="white-text">MDBNavbar</span>
                    </MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.toggleCollapse("navbarCollapse")} />
                    <MDBCollapse id="navbarCollapse" isOpen={this.state.collapseID} navbar>
                      <MDBNavbarNav left>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">About</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Features</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Services</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Opinions</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Team</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Contact</MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                      <MDBNavbarNav right>
                        <MDBNavItem>
                          <MDBNavLink to="!#">
                            <MDBIcon icon="facebook" />
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="!#">
                            <MDBIcon icon="twitter" />
                          </MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="!#">
                            <MDBIcon icon="instagram" />
                          </MDBNavLink>
                        </MDBNavItem>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBContainer>
                </MDBNavbar>
                {this.state.collapseID && overlay}
              </div>
            </Router>

            <MDBView>
              <video className="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsInline
                autoPlay muted="" loop>
                <source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4" />
              </video>
              <MDBMask className="d-flex justify-content-center align-items-center gradient">
                <MDBContainer className="px-md-3 px-sm-0">
                  <MDBRow>
                    <MDBCol md="12" className="mb-4 white-text text-center">
                      <h3 className="display-3 font-weight-bold mb-0 pt-md-5">
                        Creative Agency{" "}
                      </h3>
                      <hr className="hr-light my-4 w-75" />
                      <h4 className="subtext-header mt-2 mb-4">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit
                        deleniti consequuntur nihil.
                      </h4>
                      <MDBBtn outline rounded color="white">
                        <MDBIcon icon="home" /> Visit us
                      </MDBBtn>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              </MDBMask>
            </MDBView>

            <MDBContainer>
              <MDBRow className="pt-5 pb-4">
                <MDBCol md="12" className="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>
                </MDBCol>
              </MDBRow>
            </MDBContainer>
          </div>
          );
          }
          }

          export default VideoBackgroundPage;

      

        #videobackground .gradient {
        background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
        background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
        background: linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
        }

        #videobackground .view video {
        top: 0!important;
        left: 0!important;
        transform: none!important;
        height: 100vh;
        }
      

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

        import React, { Component } from 'react';
        import { MDBCard, MDBCardTitle, MDBBtn, MDBRow, MDBCol } from 'mdbreact';

        class CardExample extends Component {
        render() {
        return (
        <MDBRow>
          <MDBCol>
            <MDBCard className="card-image" style={{
                    backgroundImage: "url('https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg')"
                  }}>
              <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                <div>
                  <h5 className="pink-text">
                    <MDBCol icon="pie-chart" /> Marketing
                  </h5>
                  <MDBCardTitle tag="h3" className="pt-2">
                    <strong>This is card title</strong>
                  </MDBCardTitle>
                  <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>
                  <MDBBtn color="pink">
                    <MDBCol icon="clone left" /> View project
                  </MDBBtn>
                </div>
              </div>
            </MDBCard>
          </MDBCol>
          <MDBCol>
            <MDBCard className="card-image" style={{
                    backgroundImage:
                      "url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg')"
                  }}>
              <div className="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
                <div>
                  <h5 className="orange-text">
                    <MDBCol icon="desktop" /> Software
                  </h5>
                  <MDBCardTitle tag="h3" className="pt-2">
                    <strong>This is card title</strong>
                  </MDBCardTitle>
                  <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>
                  <MDBBtn color="deep-orange">
                    <MDBCol icon="clone left" /> View project
                  </MDBBtn>
                </div>
              </div>
            </MDBCard>
          </MDBCol>
        </MDBRow>
        )
        }
        }

        export default CardExample;


      

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

        import React from "react";
        import { MDBRow, MDBCol, MDBCard, MDBIcon, MDBBtn } from "mdbreact";

        const ProjectsPage = () => {
        return (
        <section className="text-center my-5">
          <h2 className="h1-responsive font-weight-bold my-5">
            Our best projects
          </h2>
          <p className="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>

          <MDBRow>
            <MDBCol md="12" className="mb-4">
              <MDBCard className="card-image" style={{
                      backgroundImage:
                        "url(https://mdbootstrap.com/img/Photos/Others/img%20%2832%29.jpg)"
                    }}>
                <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
                  <div>
                    <h6 className="purple-text">
                      <MDBIcon icon="plane" />
                      <strong> Travel</strong>
                    </h6>
                    <h3 className="py-3 font-weight-bold">
                      <strong>This is card title</strong>
                    </h3>
                    <p className="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>
                    <MDBBtn color="secondary" rounded size="md">
                      <MDBIcon icon="clone" className="left" /> MDBView project
                    </MDBBtn>
                  </div>
                </div>
              </MDBCard>
            </MDBCol>
            <MDBCol md="6" className="md-0 mb-4">
              <MDBCard className="card-image" style={{
                      backgroundImage:
                        "url(https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20%2873%29.jpg)"
                    }}>
                <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
                  <div>
                    <h6 className="pink-text">
                      <MDBIcon icon="pie-chart" />
                      <strong> Marketing</strong>
                    </h6>
                    <h3 className="py-3 font-weight-bold">
                      <strong>This is card title</strong>
                    </h3>
                    <p className="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>
                    <MDBBtn color="pink" rounded size="md">
                      <MDBIcon icon="clone" className="left" /> MDBView project
                    </MDBBtn>
                  </div>
                </div>
              </MDBCard>
            </MDBCol>
            <MDBCol md="6" className="md-0 mb-4">
              <MDBCard className="card-image" style={{
                      backgroundImage:
                        "url(https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20%2873%29.jpg)"
                    }}>
                <div className="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
                  <div>
                    <h6 className="green-text">
                      <MDBIcon icon="eye" />
                      <strong> Entertainment</strong>
                    </h6>
                    <h3 className="py-3 font-weight-bold">
                      <strong>This is card title</strong>
                    </h3>
                    <p className="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>
                    <MDBBtn color="success" rounded size="md">
                      <MDBIcon icon="clone" className="left" /> MDBView project
                    </MDBBtn>
                  </div>
                </div>
              </MDBCard>
            </MDBCol>
          </MDBRow>
        </section>
        );
        }

        export default ProjectsPage;