Skip to main content
Known Participant
November 19, 2021
Question

insert background image into jumbotron

  • November 19, 2021
  • 2 replies
  • 1649 views

Hello All.  I am having a difficult time getting an image into a jumbotron.  Just seems that it should be easy.

I want a transparent image for a background in my jumbotron.  Thanks for any and all help.

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Adobe Expert
    November 19, 2021

    DO NOT edit Bootstrap CSS code directly.  Use a separate stylesheet for custom styles.

     

    Let's say your jumbotron HTML code has a bg-secondary class.  The default style is gray. But you can change the default style in your custom CSS and override Bootstrap's default with !important.

     

     

    /**CUSTOM CSS CODE**/
    .bg-secondary {
    background-color: limegreen !important;
    background-image: url("folder/file-name.png") !important;
    }
    
    <!--JUMBOTRON HTML CODE-->
    <div class="jumbotron bg-secondary">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
    </div>
    

     

     

    Nancy O'Shea— Product User, Community Expert &amp; Moderator
    beng2000Author
    Known Participant
    November 19, 2021

    Hi Nancy, thanks for helping.  I have tried this way and it should work but its not.  I am using a dreamweaver bootstrap template. Do you think this is why it won't work? 

     

    Here is what I have:

     

    custom css:

    .jumboimage {
         background-color: lightgoldenrodyellow !important;
         background-image: url("images/herotransparent.png") !important;
    }

    then  

    <div class="jumbotron jumboimage">
    <div class="container">
    <div class="row">
    <div class="col-12">
    <h1 class="text-center">Lorem ipsum dolor sit amet</h1>
    <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, dicta, cupiditate consequatur necessitatibus quos libero eius ipsum qui sit molestiae.</p>
    <p>&nbsp;</p>
    <p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p>
    </div>
    </div>
    </div>
    </div>

     

     

    Nancy OShea
    Adobe Expert
    November 19, 2021

    A purchased template could contain almost anything in it.  I can't second guess what another developer did or which version of Bootstrap they used. Sorry.  I suggest you contact the Template developer.

     

    Also is this a WordPress template?  If it's made for WordPress, perhaps you should making your changes directly from the WordPress dashboard and not from Dreamweaver.

     

    Nancy O'Shea— Product User, Community Expert &amp; Moderator
    B i r n o u
    Adobe Expert
    November 19, 2021

    so what is the problem... ? how do you proceed ? where does it stuck ?