Topic: image not showing from local floder for my background

powerwebdesignz pro asked 6 years ago

CSS: .bgphoto { position: relative; height: 100%; background: url('PWDMDB/img/poweronbg.jpg')no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } no matter how i put the class or image in my html it does not show but the MDB image that comes with the template works.

yukixia free answered 10 months ago

    <div class="carousel-item">
      <img src="images/plant2.jpg" class="d-block w-100" alt="plant">
    <div class="carousel-item">
      <img src="images/plant3.jpg" class="d-block w-100" alt="plant">
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>

Why is it not working with this css

yukixia free commented 10 months ago

the images is not really displayed the slider and still not working

Kamila Pieńkowska staff commented 10 months ago

Please prepare a snippet with the whole code you use and explain your problem.

Ollie Vincent pro answered 6 years ago

Either way, if you don't put text within the <div class="bg"></div> then the background image will not show (I checked this in version 4.5).

You will then need to put a fixed height (commented as full height) on the image such as:

height: 50vh;

I also think you have a syntax issue in your css... should it not be

background: url("/PWDMDB/img/poweronbg.jpg")no-repeat center center fixed;



Marta Wierzbicka staff answered 6 years ago

Try the code from out documentation -


body, html {
height: 100%;

.bg {
/* The image used */
background-image: url(" page/img(20).jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;


<div class="bg"></div>

Marta Wierzbicka staff answered 6 years ago

Hi, do you have a class .full-height in your HTML tag, like here <html lang="en" class="full-height">? Best, Marta

Akhona free commented 6 years ago

yes, its still not working :(

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No