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

Подписаться 11 тыс.

Просмотров 76 тыс.

50% 1

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:
buy.stripe.com/cN28zSfmXaIxaY...
- - - - - -
⤵ Download ALL of my source codes & more!
Introducing ADWC PRO
pro.adesignerwhocodes.com
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?
adesignerwhocodes.com/contact/

Опубликовано:

24 янв 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 49

@kat_he Год назад

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

@osvaldomen9886 2 года назад

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

@robertjohnstevens Год назад

Outstanding! Thank you very much.

@anamarieronquillo2854 Год назад

Thank you for the step by step explainations 😊👍

@DariuszKonrad 2 года назад

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.

@ADesignerWhoCodes 2 года назад

Thanks! I try not to just write code in a vacuum. Everything I write I like to explain why I'm writing it. Stoked it helped you out!

@jenglish1986 3 месяца назад

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!!

@gretchensuarez5126 2 года назад

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

@ADesignerWhoCodes 2 года назад

Oh sweet! Stoked that it helped you out.

@cloudtechhills 2 года назад

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

@ADesignerWhoCodes 2 года назад

You’re so welcome.

@claudiadt1982 6 месяцев назад

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

@priscilabird294 Месяц назад

Thank you! :D

@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.

@ADesignerWhoCodes Год назад

I’d put less text over an image as it’s hard to read. Just drop it below on a white or dark gray background. I totally get what you’re trying to do. But I’m seeing a trend away from too much text over an image. I know that was an over-simplified answer haha. You could also used a media query to increase the size too

@kamalnikitha4873 Год назад

thank you so much mate, really helpful

@ADesignerWhoCodes Год назад

Glad it helped

@josealbertochavezparedes1322 Год назад

excellent video, thank yoy very much

@sasinduadithya6245 Год назад

Thank you . Dear Good Luck...

@salmansadi9842 Год назад

Great Video

@JaimeBIDtravel 2 года назад

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 🤔

@ADesignerWhoCodes 2 года назад

Since I'm working inside of a div, I tend to work with padding over margin. But every design is different. For example, you might not use any flex for yours. It is just an option. Thanks for the feedback!

@JaimeBIDtravel 2 года назад

@@ADesignerWhoCodes will keep on testing, thanks!

@ADesignerWhoCodes 2 года назад

@@JaimeBIDtravel anything specific you’d want to see in a future video, let me know here. Can’t guarantee but if it fits, I’ll record it.

@JaimeBIDtravel 2 года назад

@@ADesignerWhoCodes Awesome, thanks. Actually advices like less vertical padding than horizontal to make content seem nicer, I mean styling tips!

@technicaldarshu 10 месяцев назад

Thank you ❤

@mishulik8846 2 года назад

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

@ADesignerWhoCodes 2 года назад

Thanks! I don’t recommend changing text to images unless the type is highly stylized. If that is the case, no. As text as an image won’t reflow.

@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 :)

@ADesignerWhoCodes Год назад

Throw the full URL in.

@isakristine7846 2 года назад

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

@ADesignerWhoCodes Год назад

Glad it helped!

@davidepalombo2141 8 месяцев назад

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?

@ADesignerWhoCodes 8 месяцев назад

Drop the centering. Other designs might need additional design elements

@davidepalombo2141 8 месяцев назад

@@ADesignerWhoCodes thanks ❤️

@ADesignerWhoCodes 8 месяцев назад

@@davidepalombo2141 you’re so welcome. Ya in my design I just had one line. So that element worked. My rule. When in doubt, take it out. Then add back what you need

@mohankumar349 Год назад

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?

@ADesignerWhoCodes Год назад

Don't forget to set your flex to column.

@mohankumar349 Год назад

@@ADesignerWhoCodes Thank you.