Skip to main content
B
beng2000
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
    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
      B
      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
      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
      B i r n o u
      Adobe Expert
      November 19, 2021

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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices