No video
Responsive Background Images w/ Bootstrap 5 (in HTML/CSS)
Рет қаралды 81,027
Күн бұрын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...
- - - - - -
⤵ Download ALL of my source codes & more!
Introducing ADWC PRO
pro.adesignerw...
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?
adesignerwhoco...
@howarddantes 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 6 ай бұрын
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 2 жыл бұрын
What a tutorial!. You solved my problem. Thanks Mate!
@ADesignerWhoCodes 2 жыл бұрын
You’re so welcome.
@kat_he Жыл бұрын
Beautiful! It is beautiful! Project, explanation, everything 👏👏 Thank you!
@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.
@osvaldomen9886 2 жыл бұрын
You really cure my headache with this video, thank you!
@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!
@harshkulkarni3578 Жыл бұрын
Thanks for your support 🙏😊
@ADesignerWhoCodes Жыл бұрын
Happy to help!
@robertjohnstevens Жыл бұрын
Outstanding! Thank you very much.
@isakristine7846 2 жыл бұрын
thanks, you really saved my life!!! 😁😅
@ADesignerWhoCodes 2 жыл бұрын
Glad it helped!
@anamarieronquillo2854 2 жыл бұрын
Thank you for the step by step explainations 😊👍
@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.
@kamalnikitha4873 2 жыл бұрын
thank you so much mate, really helpful
@ADesignerWhoCodes 2 жыл бұрын
Glad it helped
@priscilabird294 4 ай бұрын
Thank you! :D
@josealbertochavezparedes1322 Жыл бұрын
excellent video, thank yoy very much
@salmansadi9842 Жыл бұрын
Great Video
@davidepalombo2141 11 ай бұрын
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 11 ай бұрын
Drop the centering. Other designs might need additional design elements
@davidepalombo2141 11 ай бұрын
@@ADesignerWhoCodes thanks ❤️
@ADesignerWhoCodes 11 ай бұрын
@@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
@the_darshan_creation Жыл бұрын
Thank you ❤
@pravalikabasam3370 Жыл бұрын
I tried exactly the same code but didn't work for me, I don't know what is the issue.
@ADesignerWhoCodes 10 ай бұрын
Source code is available for comparison.
@sasinduadithya6245 Жыл бұрын
Thank you . Dear Good Luck...
@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
@claudiadt1982 9 ай бұрын
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
@examgamer1112 11 ай бұрын
Thank you very much ♥
@ADesignerWhoCodes 11 ай бұрын
So welcome!
@austinbao 2 жыл бұрын
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 2 жыл бұрын
Throw the full URL in.
@mohankumar349 2 жыл бұрын
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 2 жыл бұрын
Don't forget to set your flex to column.
@mohankumar349 2 жыл бұрын
@@ADesignerWhoCodes Thank you.
@gayashantharaka4435 Жыл бұрын
thanks
@royaljkboss1185 Жыл бұрын
Abe अंग्रेज तूने भी सही से नही सीखा
奧特羅羅 Ultraman
Рет қаралды 6 МЛН
A Designer Who Codes
Рет қаралды 37 М.
A Designer Who Codes
Рет қаралды 48 М.