How do I use image for nav background in Bootstrap 4 - css

Question

How do I use Bootstrap 4 with a pattern background
Just converting website to use Boostrap and currently I have this header using the dark background and it looks fine but ideally instead of just the dark grey background I want to use the patterned background I was previously using as the nav bar, this would go over the whole width of the page instead of the dark grey.
<div class="container-fluid fixed-top bg-dark">
<div class="navbar navbar-expand-lg navbar-dark bg-dark container text-center">
<a href="http://jthink.net/index.jsp" class="navbar-brand">
<img src="http://www.jthink.net/images/icon32.png" width="30" height="30" class="d-inline-block align-top" alt="">
JThink
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-item nav-link" href="http://blog.jthink.net">
Blog
</a>
<a class="nav-item nav-link" href="http://jthink.net/jaikozforum">
User Forum
</a>
<a class="nav-item nav-link" href="http://jthink.net/songkong">
SongKong
</a>
<a class="nav-item nav-link" href="http://jthink.net/jaikoz">
Jaikoz
</a>
<a class="nav-item nav-link" href="http://albunack.net" target="_blank">
Albunack
</a>
<a class="nav-item nav-link" href="http://www.jthink.net/jaudiotagger/index.jsp" >
Jaudiotagger
</a>
</div>
</div>
</div>
</div>
e.g instead of looking like this
I want the blue background in this screenshot to be used for the navbar

Answer 1

You can apply a background image to your bootstrap navbar by adding a background-image style to the div surrounding your navbar.
Here are the attributes you can apply to your image:
background-image: url("[file-location].png");
background-repeat: ;/* Determine what direction the image will repeat */
background-position: ; /* Where the image will be positioned relative to "top, right, bottom, and/or left */
background-attachment: ; /* use with "fixed" to make it scroll with page */
Read more about this property at W3Schools.
If the background image is making your hyperlink hard to read, change its normal color using color: [hex value / color name]; on nav-item or nav-link like this:
.nav-item > a {
color: #000000; /* [hex value / color name] */
}
Then you can change the color of the link when you hover over it by using the following:
.nav-item > a:hover {
color: red; /* [hex value / color name] */
}