Why nothing seems to work? Can\&#039;t replace image in

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

Stanley Davenport pro asked 6 years ago

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.

Add comment

Stanley Davenport pro answered 6 years ago

0 0 Best answer

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 priority commented 6 years 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.

Add comment

Josip Tomašev priority answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

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

Stanley Davenport pro commented 6 years 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 commented 6 years ago

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

Josip Tomašev priority commented 6 years 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 commented 6 years 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 priority commented 6 years 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 commented 6 years 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 priority commented 6 years 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 commented 6 years 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 priority commented 6 years ago

I'm glad I helped :)

Add comment

Stanley Davenport pro answered 6 years ago

0 0 Best answer

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>

<title>The Solar Power Movement</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/mdb.min.css" rel="stylesheet">

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

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

<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/" class="btn btn-primary btn-lg" rel="nofollow">Sign up!</a>
<a target="_blank" href="https://solarpowermovement.com/landing-page.html/" class="btn btn-default btn-lg" rel="nofollow">Learn more</a>
</li>
</ul>
</div>
</div>

<footer class="page-footer center-on-small-only mt-0">

<div class="container-fluid">
<div class="row">

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

<hr class="w-100 clearfix d-sm-none">

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

<hr class="w-100 clearfix d-sm-none">

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

<hr class="w-100 clearfix d-sm-none">

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

</div>
</div>

<hr>

<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/" class="btn btn-danger" rel="nofollow">Sign up!</a></li>
<li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default" rel="nofollow">Learn more</a></li>
</ul>
</div>

</div>
</div>

</footer>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="js/popper.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/mdb.min.js"></script>

</body>

</html>

Please insert min. 20 characters.

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>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <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>  <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>   <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/" class="btn btn-primary btn-lg" rel="nofollow">Sign up!</a> <a target="_blank" href="https://solarpowermovement.com/landing-page.html/" class="btn btn-default btn-lg" rel="nofollow">Learn more</a> </li> </ul> </div> </div>   <footer class="page-footer center-on-small-only mt-0">  <div class="container-fluid"> <div class="row">  <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>  <hr class="w-100 clearfix d-sm-none">  <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>  <hr class="w-100 clearfix d-sm-none">  <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>  <hr class="w-100 clearfix d-sm-none">  <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>  </div> </div>  <hr>  <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/" class="btn btn-danger" rel="nofollow">Sign up!</a></li> <li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default" rel="nofollow">Learn more</a></li> </ul> </div>   <div class="footer-copyright"> <div class="container-fluid"> © 2010-2017 Copyright: <a href="https://www.solarpowermovement.com">SPM</a> </div> </div>  </footer>    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <script type="text/javascript" src="js/mdb.min.js"></script> </body> </html>

Add comment

Marta Wierzbicka staff answered 6 years ago