Sign in


Sign up


Why nothing seems to work? Can\'t replace image in default template.

MDB SupportCategory: General Bootstrap questionsWhy nothing seems to work? Can\'t replace image in default template.
Stanley Davenport Pro User asked 2 weeks ago, version:0.04

In the default landing page from MDB I am trying to replace this line of code:url(“https://mdbootstrap.com/img/Photos/Others/img%20(50).jpg”)no-repeat center center fixed;with this line of code:<img src=”/images/solar-panel-on-grass-hut-roof.jpg”>no-repeat center center fixed;or this:<img src=”/images/solar-panel-on-grass-hut-roof.jpg”>With zero results. The image will not show up.  What am I doing wrong?I don’t know what the version is. It is the latest Pro download. 4.3.3.

4 Answers
Marta Szymanska answered 2 weeks ago

Hi,

can I see your whole code with this problem? You can paste it here or send me to m.szymanska@mdbootstrap.com. I’ll try to help you.

Best,

Marta

Stanley Davenport Pro User answered 2 weeks ago

I am just trying to change out the background image in the standard landing page template. Here is the code in full. Thank you.

<!DOCTYPE html>
<html lang=”en”>

<head>

<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>

<title>The Solar Power Movement</title>

<!– Font Awesome –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”&gt;

<!– Bootstrap core CSS –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

<!– Material Design Bootstrap –>
<link href=”css/mdb.min.css” rel=”stylesheet”>

<!– Template styles –>
<style rel=”stylesheet”>
/* TEMPLATE STYLES */

html,
body,
.view {
height: 100%;
}
/* Navigation*/

.navbar {
background-color: transparent;
}

.scrolling-navbar {
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}

.top-nav-collapse {
background-color: #1C2331;
}

footer.page-footer {
background-color: #1C2331;
margin-top: -1px;
}

@media only screen and (max-width: 768px) {
.navbar {
background-color: #1C2331;
}
}
.navbar .btn-group .dropdown-menu a:hover {
color: #000 !important;
}
.navbar .btn-group .dropdown-menu a:active {
color: #fff !important;
}
/*Call to action*/

.flex-center {
color: #fff;
}

.view {
background: <img src=”/images/solar-panel-on-grass-hut-roof.jpg” class=”img-fluid” alt=”solar hut”>no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

</head>

<body>

<!–Navbar–>
<nav class=”navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar”>
<div class=”container”>
<a class=”navbar-brand” href=”#”>SPM</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”>
<ul class=”navbar-nav mr-auto”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home<span class=”sr-only”>(current)</span></a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>About</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Contact</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Anti-Solar</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>FAQ</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Blog</a>
</li>
<li class=”nav-item btn-group”>
<a class=”nav-link dropdown-toggle” id=”navbarDropdownMenuLink” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>Articles
</a>
<div class=”dropdown-menu dropdown-primary” aria-labelledby=”navbarDropdownMenuLink”>
<a class=”dropdown-item” href=”#”>Solar Modules</a>
<a class=”dropdown-item” href=”#”>Solar Jobs</a>
<a class=”dropdown-item” href=”#”>Solar Chargers</a>
<a class=”dropdown-item” href=”#”>Solar Batteries</a>
<a class=”dropdown-item” href=”#”>Roof Mounted</a>
<a class=”dropdown-item” href=”#”>Ground Mounted</a>
<a class=”dropdown-item” href=”#”>Off Grid Solar</a>
<a class=”dropdown-item” href=”#”>Grid Tied Solar</a>
<a class=”dropdown-item” href=”#”>Solar Inverters</a>
<a class=”dropdown-item” href=”#”>Going Solar</a>
<a class=”dropdown-item” href=”#”>Geothermal</a>
<a class=”dropdown-item” href=”#”>Solar Thermal</a>
</div>
</li>
</ul>
<form class=”form-inline”>
<input class=”form-control mr-sm-2″ type=”text” placeholder=”Search” aria-label=”Search”>
</form>
</div>
</div>
</nav>

<!–/.Navbar–>
<!–Mask–>
<div class=”view hm-black-light”>
<div class=”full-bg-img flex-center”>
<ul class=”animated fadeInUp”>
<li>
<h1 class=”h1-responsive font-bold”>A Solar Power Revolution Is At Hand</h1></li>
<li>
<p>Creating JOBS – Financial Security – Building Solar Equity – Changing Lives</p>
</li>
<li>
<a target=”_blank” href=”https://solarpowermovement.com/getting-started.html/&#8221; class=”btn btn-primary btn-lg” rel=”nofollow”>Sign up!</a>
<a target=”_blank” href=”https://solarpowermovement.com/landing-page.html/&#8221; class=”btn btn-default btn-lg” rel=”nofollow”>Learn more</a>
</li>
</ul>
</div>
</div>
<!–/.Mask–>

<!–Footer–>
<footer class=”page-footer center-on-small-only mt-0″>

<!–Footer links–>
<div class=”container-fluid”>
<div class=”row”>
<!–First column–>
<div class=”col-lg-3 col-md-6 ml-auto”>
<h5 class=”title mb-3″><strong>About SPM</strong></h5>
<p>Solar power has graced our planet ever since the Creator said: “Let there be light.” Are we not glad that such a dependable source of power was unleashed to sustain life here on earth. Making use of that incredible source of energy is nothing new for our day.</p>
<p>Using solar power in various ways is evidenced in long gone civilizations as a means to heat water and homes and to cook food. The Solar Power Movement is alive and making strides in our 21st century. That is what this venue is about. Enjoy!</p>
</div>
<!–/.First column–>
<hr class=”w-100 clearfix d-sm-none”>
<!–Second column–>
<div class=”col-lg-2 col-md-6 ml-auto”>
<h5 class=”title mb-3″><strong>First column</strong></h5>
<ul>
<li>
<a href=”#!”>Link 1</a>
</li>
<li>
<a href=”#!”>Link 2</a>
</li>
<li>
<a href=”#!”>Link 3</a>
</li>
<li>
<a href=”#!”>Link 4</a>
</li>
</ul>
</div>
<!–/.Second column–>
<hr class=”w-100 clearfix d-sm-none”>
<!–Third column–>
<div class=”col-lg-2 col-md-6 ml-auto”>
<h5 class=”title mb-3″><strong>Second column</strong></h5>
<ul>
<li>
<a href=”#!”>Link 1</a>
</li>
<li>
<a href=”#!”>Link 2</a>
</li>
<li>
<a href=”#!”>Link 3</a>
</li>
<li>
<a href=”#!”>Link 4</a>
</li>
</ul>
</div>
<!–/.Third column–>
<hr class=”w-100 clearfix d-sm-none”>
<!–Fourth column–>
<div class=”col-lg-2 col-md-6 ml-auto”>
<h5 class=”title mb-3″><strong>Third column</strong></h5>
<ul>
<li>
<a href=”#!”>Link 1</a>
</li>
<li>
<a href=”#!”>Link 2</a>
</li>
<li>
<a href=”#!”>Link 3</a>
</li>
<li>
<a href=”#!”>Link 4</a>
</li>
</ul>
</div>
<!–/.Fourth column–>
</div>
</div>
<!–/.Footer links–>

<hr>

<!–Call to action–>
<div class=”call-to-action”>
<h4 class=”mb-5″>Material Design for Bootstrap</h4>
<ul>
<li>
<h5>Get our UI KIT for free</h5></li>
<li><a target=”_blank” href=”https://mdbootstrap.com/getting-started/&#8221; class=”btn btn-danger” rel=”nofollow”>Sign up!</a></li>
<li><a target=”_blank” href=”https://mdbootstrap.com/material-design-for-bootstrap/&#8221; class=”btn btn-default” rel=”nofollow”>Learn more</a></li>
</ul>
</div>
<!–/.Call to action–>

<!–Copyright–>
<div class=”footer-copyright”>
<div class=”container-fluid”>
© 2010-2017 Copyright: <a href=”https://www.solarpowermovement.com”>SPM</a&gt;

</div>
</div>
<!–/.Copyright–>

</footer>
<!–/.Footer–>

<!– SCRIPTS –>

<!– JQuery –>
<script type=”text/javascript” src=”js/jquery-3.2.1.min.js”></script>

<!– Bootstrap dropdown –>
<script type=”text/javascript” src=”js/popper.min.js”></script>

<!– Bootstrap core JavaScript –>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>

<!– MDB core JavaScript –>
<script type=”text/javascript” src=”js/mdb.min.js”></script>

</body>

</html>

Josip Tomašev Pro User answered 2 weeks ago

Your problem has a simple solution
If you change your CSS:

.view {
background: <img src="/images/solar-panel-on-grass-hut-roof.jpg" class="img-fluid" alt="solar hut"> no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

in something like:

.view {
background: url("/images/solar-panel-on-grass-hut-roof.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

and everything will work as it should 🙂
 
Best regards
Josip
 

Josip Tomašev Pro User replied 2 days ago

I’m glad I helped 🙂

Stanley Davenport Pro User replied 2 days ago

OK. All is working again now. I have so much to understand and the classes I am taking often get bogged down in tangents. Thank you for your help. I really appreciate it.

Josip Tomašev Pro User replied 2 days ago

Yes, mdb.css and mdb.js must go together. And they have to go with the corresponding versions of bootstrap.css and bootstrap.js because the MDB mostly tracks changes in Botstrap, from version to version.

Stanley Davenport Pro User replied 2 days ago

At first only the js folder. Now that I have copied all folders over the index file is working. Is this what I must do every single time we get an update?
Thank You.

Josip Tomašev Pro User replied 2 days ago

I copied css, js, and font directories from the official zip file (version 4.4.4) into my test directory, copied your html to index.html and opened it in the web browser. I created a directory images and added an image with the same name as in the css class .view.
And everything works properly.

Did you copy css and js directories (and replaced all files) into your working directory?

Stanley Davenport Pro User replied 2 days ago

I was referring to the java script subfolder in the 4.4.4 update. I took the files from the updated folders and copied them over the existing files in the previous version. Could you please explain about the .view as that is in my code as well.
Thank You

Josip Tomašev Pro User replied 2 days ago

I suppose you mean MDB 4.4.4?
I have tried your html with a corrected css class .view, with Free and with Pro version, and the page works flawlessly.

Stanley Davenport Pro User replied 2 days ago

With the JS 4.4.4 update the image is gone again. Any reason why this would happen?

Stanley Davenport Pro User replied 2 weeks ago

Thank you. That worked. I just cannot use the alt or img-fluid syntax. I have a lot to learn. Thanks

Stanley Davenport Pro User answered 2 days ago

Problem solved. As a non-programmer I often do not understand how coding works. My fault. I learned from this go around that when a new update for PRO is released from MDB I must overwrite all folders into my working project directory. I must assume then with any public websites for those to be updated with the latest release then an overwrite will need to be done as well.

Thanks.

Josip Tomašev Pro User replied 2 days ago

And one small tip: never rewrite new versions of css / js that are online before you’ve tried off-line.
Specifically, bootstrap is still in development, and between versions there are differences (new css classes, changed and / or abolished existing css class), and MDB tracks those changes. So that there may be something in your code that is no longer defined in bootstrap / MDB so you can “kill” the site that is now working.
Always test on your local computer before uploading to a production server.