Topic: Image srcset and background

LAGIER priority asked 5 years ago

Hello MDB team

I have a question about the size of the images for viewing on a PC, Tablet or Smarphone.
The responsive works, but the problem is that one loads a computer screen image that is heavy for a small smarphone screen.

Before I ask you I look for a solution.
For the Carousel no problem I have the solution, but not for an image in background with a text on it.

That it would be the best solution between:
1 - put "DIV" for each size, example:
  a: for lg and more (div class = "d-none d-lg-block")
  b: for md (div class = .d-none .d-md-block .d-lg-none ")
  c: for xs (class div = .d-block .d-sm-none ")

or this second solution:

 <img srcset = "xxxxx-320w.jpg 320w,
             xxxxx-480w.jpg 480w,
             xxxx-800w.jpg 800w "
     sizes = "(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px "
     src = "xxxx-800w.jpg" alt = "An image">

For the second solution, how to put the code (img srcset) in this example of your page MDB-Magazine-Templates-Pack / html / homepage / v-4.html, because the image is placed in background:

            <div style = "background-image: url (''); background-repeat: no-repeat; background-size: cover;">
                <! - Caption ->
                <div class = "full-bg-img flex-center white-text rgba-stylish-strong">
                    <ul class = "animated fadeIn col-md-12 list-unstyled">
                            <h1 class = "h1-responsive do-weight-bold-mt-5 pt-5"> Sed ut perspiciatis unde omnis ist natus sit voluptatem </ h1>
                        </ Li>
                            <p> Unde omnis ist natus sit voluptatem veritatis and quasi architecto beatae </ p>
                        </ Li>
                        <li class = "pb-5">
                            <a target = "_ blank" href = "" class = "mb-5 btn-danger btn-rounded wave-effect waves-light" rel = "nofollow" > Read more </a>
                        </ Li>
                    </ Ul>
                </ Div>
                <! - /.Caption ->
            </ Div>
        </ Section>

Thank you for your help.

Exemple for:

LAGIER priority answered 5 years ago

Hello Piotr,

I thank you for this excellent information.
Tiny allowed to win 27%.
I did not know Tiny, now he's in my favorites.

I wish you a good day, and happy holidays to all the team who is reactive.


Piotr Glejzer staff commented 5 years ago

Thank you very much!

I wish you happy holidays too!



Piotr Glejzer staff answered 5 years ago


If you want to change size of your image you can use some converters to change sizes like :

For second question solution is simple. You have to delete that style from div, add new tag <img> add some css style like : 

div { width:100%; height:100%; }

img { width:100%; height:100%; object-fit:cover }

<imgsrc="//youadddres" />





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: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.5.15
  • Device: Bootstrap
  • Browser: Chrome, FF
  • OS: Windows 10 64
  • Provided sample code: No
  • Provided link: Yes