insert background image into jumbotron

[beng2000]

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.

[B i r n o u]

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

[Nancy OShea]

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>

[beng2000]

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]

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 OShea]

Save your work and upload it to your remote server.  Come back and post the URL here so I can look at it.