Responsive Background Images w/ Bootstrap 5 (in HTML/CSS)
ฝัง
- เผยแพร่เมื่อ 24 ม.ค. 2022
- 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/
Beautiful! It is beautiful! Project, explanation, everything 👏👏 Thank you!
You really cure my headache with this video, thank you!
Outstanding! Thank you very much.
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.
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!
Thank you for the step by step explainations 😊👍
What a tutorial!. You solved my problem. Thanks Mate!
You’re so welcome.
Thank you for your amazing videos! Very well explained! I am a beginner programming and you helped me a lot!
Oh sweet! Stoked that it helped you out.
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!!
Thank you! :D
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.
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
thank you so much mate, really helpful
Glad it helped
excellent video, thank yoy very much
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 :)
Throw the full URL in.
Thank you . Dear Good Luck...
Thank you ❤
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
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 🤔
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!
@@ADesignerWhoCodes will keep on testing, thanks!
@@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.
@@ADesignerWhoCodes Awesome, thanks. Actually advices like less vertical padding than horizontal to make content seem nicer, I mean styling tips!
great job! if i change the text to an image would the attributes apply the same responsiveness? 😁
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.
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?
Drop the centering. Other designs might need additional design elements
@@ADesignerWhoCodes thanks ❤️
@@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
thanks, you really saved my life!!! 😁😅
Glad it helped!
Great Video
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?
Don't forget to set your flex to column.
@@ADesignerWhoCodes Thank you.
Thank you very much ♥
So welcome!
thanks
Thanks for your support 🙏😊
Happy to help!
I tried exactly the same code but didn't work for me, I don't know what is the issue.
Source code is available for comparison.
Abe अंग्रेज तूने भी सही से नही सीखा