Bootstrap Background Image - Tutorial on the latest Bootstrap 5

Поділитися
Вставка
  • Опубліковано 16 лис 2024

КОМЕНТАРІ • 41

  • @Mdbootstrap
    @Mdbootstrap  2 роки тому +4

    I hope you liked the video. If you are already here in the comment section, I invite you to let me know what other videos would you like to see in the future. Also, share any other feedback that you have on this video!
    I don't run ads on tutorials - the only value I get is your engagement in the MDB community.
    So if you would like to show your support:
    - Encourage more people to Keep Coding ---> Send this video to one person
    - Stay tuned for new content ---> Subscribe & ring the bell
    In the description, you will find links to some useful, free resources:
    📥 Download Material Design for Bootstrap - FREE open-source UI KIT
    🎓 Learn responsive web design with the latest Bootstrap 5 (full 1.5H course)
    🎁 Join our mailing list & receive exclusive perks (free stuff that is normally behind a paywall)
    ⭐Support the creation of open-source packages with a STAR on GitHub
    👪 If you have any questions - don't hesitate to ask on our Facebook group
    Thank you for your support!

  • @saimathappa9757
    @saimathappa9757 2 роки тому

    that was such a simple defination with smooth narration step by step ...... i wish to see all your progress further

  • @Etienne_Legrand
    @Etienne_Legrand Рік тому +3

    .bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }

    • @diego6789
      @diego6789 Рік тому

      worked for me ty

    • @maximboucher4073
      @maximboucher4073 8 місяців тому

      Thanks homie this saved me when nothing else would work

  • @adiatasmau7418
    @adiatasmau7418 2 роки тому +1

    Hi ,thank you for making this video,I really do appreciate.however the class="mask" is not masking the whole image,it's only masking the text in it,how do i resolve this.

  • @brandonramirez4772
    @brandonramirez4772 3 роки тому

    Great video, man! Learned a lot from this.

  • @ohidullah380
    @ohidullah380 3 роки тому +1

    Very good tutorial. It is very useful.

  • @rolandoshapiamafreitas7204
    @rolandoshapiamafreitas7204 10 місяців тому

    Excelente!! Gracias.

    • @Mdbootstrap
      @Mdbootstrap  10 місяців тому

      De Nada :) Keep Coding!

  • @hendramixmax
    @hendramixmax 3 роки тому

    Thx man!!

  • @My-video123
    @My-video123 3 роки тому

    Can I use width/height in percents? Will it work?

  • @akiakiization
    @akiakiization Рік тому

    how to use all that scripts on bootstrap studio?

  • @pranshusati5818
    @pranshusati5818 2 роки тому

    how can i use MDBootstrap on next js app?

  • @user-ee9ld4tr7p
    @user-ee9ld4tr7p 3 роки тому

    Why can't I upload my own photos in my project as a background image? Pictures from unsplash didn't work either.

    • @Mdbootstrap
      @Mdbootstrap  3 роки тому

      Without seening your code we cannot tell you what's wrong 🤷‍♂️

  • @manikantajupudi4129
    @manikantajupudi4129 3 роки тому

    Thanks Sir

  • @vijith_vijayan
    @vijith_vijayan 2 роки тому

    hi for me class="bg-image" is not working. The image is still broken .. Do I have to select a HD image for this?

    • @Mdbootstrap
      @Mdbootstrap  2 роки тому

      Thanks for letting me know about the issue.
      Let me move this conversation to the forum, please create a ticket here:
      mdbootstrap.com/support/
      It's much easier to solve issues there instead of the YT comment section.
      You can specify your device, browser, OS and above all, you can add a code snippet if you need.
      Me or one of my colleagues will do our best to help you out.
      PS. If your ticket refers to a video, please add the timestamp of the point where the problem occurred

    • @Lucker159369147
      @Lucker159369147 2 роки тому

      Hey, have you solved it somehow? I have same issue.

    • @Etienne_Legrand
      @Etienne_Legrand Рік тому +1

      @@Lucker159369147 Create the class in your CSS file.
      .bg-image {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      }

  • @SantanuMisra1789
    @SantanuMisra1789 3 роки тому

    hi your free template (background image or video) does not show navbar in mobile layout ; the navbar disappear as soon screen width is minimized.

    • @Mdbootstrap
      @Mdbootstrap  3 роки тому

      Thanks for noting, we'll fix that bug

    • @FIGHTMAN94
      @FIGHTMAN94 3 роки тому

      @@Mdbootstrap Did you ever fix this? I really want to use this, but I want that navbar on mobile. Thank you

  • @pietergrobler1257
    @pietergrobler1257 2 роки тому

    you need a magnifier to see anything!

  • @natek3954
    @natek3954 3 роки тому

    Can this be done without using an image from a URL?

    • @Mdbootstrap
      @Mdbootstrap  3 роки тому

      If you ask if you can use the image directly from your computer disk - yes, you can. Take a look here: mdbootstrap.com/docs/standard/content-styles/background-image/#section-how-it-works

  • @marzena153
    @marzena153 3 роки тому

    100vh cuts my photo, it looks like bacground but when i have the photo of a cat i can see only his ear in the background. Someone knows why?

    • @Mdbootstrap
      @Mdbootstrap  3 роки тому

      Can you create a snippet and show us your code? mdbootstrap.com/snippets/

    • @airwebx
      @airwebx 3 роки тому

      I have the same problem. Did you find a solution?

    • @marzena153
      @marzena153 3 роки тому

      @@airwebx I cut my main photo before adding it to the website so this looks good now. This solution may not work in all cases, but you can prepare your photo before using that, I'm not sure but maybe the tutorials photos are also prepared to the right size...

    • @airwebx
      @airwebx 3 роки тому

      @@marzena153 oh ok thank you!

  • @zihanrashid5874
    @zihanrashid5874 3 роки тому

    will it be responsive?

  • @amazinghenry8893
    @amazinghenry8893 3 роки тому

    awesome

  • @loge9981
    @loge9981 3 роки тому

    and its not ressponsive- what a crap is this????

    • @Mdbootstrap
      @Mdbootstrap  3 роки тому

      Which example exactly do you mean? All of it is responsive.

  • @V-a-s-h
    @V-a-s-h 3 роки тому

    hi! great video! Just one question: i set the image with "100vh", it keeps cloning the image(upload.wikimedia.org/wikipedia/commons/thumb/5/53/Biblioteca_Joanina.jpg/1024px-Biblioteca_Joanina.jpg) to the side, how can i resolve it?

    • @Mdbootstrap
      @Mdbootstrap  3 роки тому

      Let me move this conversation to the forum, please create a ticket here:
      mdbootstrap.com/support/
      It's much easier to solve issues there instead of the YT comment section.
      You can specify your device, browser, OS and above all, you can add a code snippet if you need.
      Me or one of my colleagues will do our best to help you out.
      PS. If your ticket refers to a video, please add the timestamp of the point where the problem occurred

    • @turnpikemachine
      @turnpikemachine 2 роки тому

      add a class="bg-image" to the