Background Images

For my practice challenge today I set out to create a simple signup form and got very (very) distracted with the background image. While I have used background images before I have not had to do much manipulation to them and quickly realized that my old way of adding the image in html wasn't really going to be practical.

The challenges I was immediately presented with were getting this image to be full screen and not cause a scroll bar to appear, getting it centered, and getting it to retain the image proportions. I quickly found that all these issues have been outlined and addressed in a number of articles. I found most of them to be more confusing than helpful, however. But this tutorial on CSS-Tricks seemed to give me the effect I was looking for, with minor tweaking.

Here is the guide provided by Chris Coyier:

CCS-Tricks Background Image CSS

Here is my CSS code and background I was working on as a result:Background CSS CodeFull Size Background

The only change I made was switching out "top" for the first "center" after the background url is entered. Without making this change a large portion of the top of my image was cut off-boo.

The most challenging thing about learning CSS is sometimes just accepting that things are done by doing a certain thing and sometimes you won't fully understand why the flippin' figs it makes something work, but you have to just remember it and move on with life. This is one of those things for me. If there is a more efficient way to go about this these days I would love to know about it. But until then I will be tackling this issue with the above nonsense.

Happy backgrounding!