CSS background images set to be full width of their HTML elements are a staple in modern web design & development. These are often used for dramatic visuals with some accompanying text inside.
Typically a css background image has the text color of white, so we will make sure to create a semi-transparent black overlay so that our text will remain fully legible, and wont become distorted by the image we set with our HTML & CSS.
By using basic CSS background properties, we can get this done in less than 5 minutes.
Our entire background image will consist of just two div elements, and that’s it!
If you have any trouble setting the background image, feel free to reach out in the comments section, preferably with a link to your HTML and CSS code.
Full Width CSS Background Image:
The Ultimate Guide To Flexbox (Since I used it in this video):
Vertical Units CSS:
Make sure to subscribe to my channel and yell at me to make new videos! =)
source