Changing Bootstrap template background color to transparent background image

[KushiY]

Can anyone please help me out to solve the change of background color to transparent background image?

Here is the link of the template https://startbootstrap.com/template-overviews/freelancer/

I want the color to be changed to image. Also tried doing but its bg-secondary color is blue…

<

nav class=”navbar navbar-expand-lg bg-secondary fixed-top text-uppercase” id=”mainNav”>

Thanks in Advance! thank you :)

[JeroenR]

If you make sure your custom stylesheet is loaded last then you can override the background color by doing things as:
.bg-secondary { background: url(http://www.disney-plaatjes.nl/files/disney/mickey-mouse/mickey-mouse-disney-829.jpg) no-repeat center center; } or just the color: .bg-secondary { background-color: transparent !important; }.
See the !important here, because the stylesheet of freelancer sets its background-color to important.

[KushiY]

After writing ->

.bg-secondary { background: url(http://www.disney-plaatjes.nl/files/disney/mickey-mouse/mickey-mouse-disney-829.jpg) no-repeat center center; }

to the last line of freelancer.css file only in navbar it showing eyes of mickey …

What else I should do to completely make it look from this

https://startbootstrap.com/template-overviews/freelancer/

to something similar as this

https://www.google.co.in/search?biw=1242&bih=579&tbm=isch&sa=1&ei=_MQ4WriQNMTavgTXiaKgAg&q=resume+templates+websites&oq=resume+templates+websites&gs_l=psy-ab.3..0i24k1.2297.5153.0.5405.9.4.0.3.3.0.1027.1903.2-2j0j1j7-1.4.0….0…1c.1.64.psy-ab..3.6.1516…0.0.KeQiHOdTna8#imgdii=8BcZfmxw3ShZMM:&imgrc=PurbxS_mndZWHM:

Here background is transparent image…

Thanks inAdvance! :)

[Elliejoshi]

markup

Scotch Scotch Scotch

CSS

.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
/* You could use :after – it doesn’t really matter */
.my-container:before {
content: ‘ ‘;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url(‘http://placekitten.com/1500/1000&#8217;);
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

Thanks
Ellies Joshi
http://webchromite.com/

[KushiY]

Thanks ..! I got answer ..changed background image in bootstrap.min.css… :)

[Author]

Posts