Topic: image not showing from local floder for my background
powerwebdesignz pro asked 6 years ago
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 Szymanska staff pro premium answered 6 years ago
.full-height
in your HTML tag, like here <html lang="en" class="full-height">
?
Best,
Marta Marta Szymanska staff pro premium answered 6 years ago
Try the code from out documentation - https://mdbootstrap.com/css/bootstrap-background-image/.
CSS:
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML:
<div class="bg"></div>
yukixia answered 11 months ago
<div class="carousel-item">
<img src="images/plant2.jpg" class="d-block w-100" alt="plant">
</div>
<div class="carousel-item">
<img src="images/plant3.jpg" class="d-block w-100" alt="plant">
</div>
</div>
<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>
<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>
</button>
</div>
Why is it not working with this css
yukixia commented 11 months ago
the images is not really displayed the slider and still not working
kpienkowska staff commented 11 months ago
Please prepare a snippet with the whole code you use and explain your problem.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No