Dreamweaver Bootstrap Responsive Background Images
In this video, we take a look at Dreamweaver Bootstrap responsive background images. Thus the name of the video, “Dreamweaver Bootstrap Responsive Background Images.”
It is very simple to drop a background image into any CSS or Bootstrap Column container ( of course all Bootstrap columns are simply CSS containers). The challenge is that if you want the images to be fully responsive, there is some CSS and, OH NO, math to work with.
In our video, “ Dreamweaver Bootstrap responsive background images,” we share the three different divs that are needed to make Dreamweaver Bootstrap responsive background images.
In the video, we go right to the code, right to the math, and right to an explanation of why each piece of code is needed. As you look at the video, I left a little bit of the logic out. That logic comes from the fact that Bootstrap column divs automatically adds padding to those divs. I don´t go into explaining it in the video, but the math and the code placement makes sense if you follow the video as a guide.
After I experimented with the code, I found that if I dropped some text in the html, in the divs, the text would drop down, outside of the div, creating a white, empty area, simply with the text in it. Therefore, in this video, “ Dreamweaver Bootstrap responsive background images,” I share how I created a special div for the text. I also share how and why I added a negative margin to that div to get it to show up in the middle of the image.
I will say it again in this video, “ Dreamweaver Bootstrap responsive background images,” Dreamweaver is great. Bootstrap is great. The fact of the matter still stands and that fact is that if you want to move ahead in controlling your site, a basic knowledge of CSS is essential.
