Responsive Background Images w/ Bootstrap 5 (in HTML/CSS)

Here's how to make your background images responsive so they flex and adjust to any screen size—mobile, tablet or desktop. Also included responsive typography for mobile and tablet as well.

Download the source code:

- - - - - -

⤵ Download ALL of my source codes & more!

Introducing ADWC PRO

ADWC Pro provides you with:

• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!

Price:
Just $6/mo. or $49/year (32% off monthly)

-------

Got a question for me?

[howarddantes]

Oh man I can cry! Thank you very much. Been searching for something simple like this. Everything I find has me d/l their "kit". Anyway, thanks again for this. Responsive background video, next???? 😅 ... edit: I also like you explain WHY and WHAT you're doing... most tuts have you, "do this, then do that" without a simple reason why.

[jenglish]

Very good video. Like the use of the image sizing. Not sure about adding the media query in the end since if the layout is good, it may be overkill and end final part was cut up by commercial. The way you handle the image and text in BS5 is a life saver for many of us who struggle using the flex power of BS but want the old design path used in older CSS. Really nice job of bridging this and great design. This is probably the best and most used video you have produced. Keep up the content. I for one would like you to do a soup to nuts contact form as a project. You really have good DRY chops - cudos!!

[cloudtechhills]

What a tutorial!. You solved my problem. Thanks Mate!

[osvaldomen]

You really cure my headache with this video, thank you!

[kat_he]

Beautiful! It is beautiful! Project, explanation, everything 👏👏 Thank you!

[gretchensuarez]

Thank you for your amazing videos! Very well explained! I am a beginner programming and you helped me a lot!

[austinbao]

How changes would i have to make to "style" at 2:25 if my image isnt in the project folder? I only have a url/link that directs you to the image

ANY help would be appreciated :)

[isakristine]

thanks, you really saved my life!!! 😁😅

[kamalnikitha]

thank you so much mate, really helpful

[JaimeBIDtravel]

Watching you it seems so easy to accomplish!
I am investigating on this but I cannot find out how to avoid the content not interfering with the background image. Applying margins and padding to the inner content also affects the background image position 🤔

[anamarieronquillo]

Thank you for the step by step explainations 😊👍

[mishulik]

great job! if i change the text to an image would the attributes apply the same responsiveness? 😁

[cuteypatootie]

What's a good way to go about text overflow here? I have setup a page similar to yours but when I add enough text, and put the resolution at mobile size, the masthead's text overflows into my navbar and subsequent divs after the masthead. Thanks.

[claudiadt]

Hello there Great video as always, I am learning a lot from you! I was wondering, if instead of the h1 text, i would like to add a navbar on top, how could I have a responsive background image? I have been trying so many different things, but nothing really work img-fluid used in the image style is not helping either. (I am using Bootstrap 5.2 for reference) Thank you

[davidepalombo]

thanks for the video, very usefull! can you explain me what can i do if I need to put two lines of text ? the second line under the first and centered like the first one?

[mohankumar]

What if I put a p tag below h1 tag, it doesn't come one below the other but instead comes side by side as columns because of d-flex, any solution? and what should be the calculation for p tag in media query?

[pravalikabasam]

I tried exactly the same code but didn't work for me, I don't know what is the issue.