While whittling away at my online portfolio design, I was struggling with how to insert multiple background images that sat atop one another to differentiate the sections my users would scroll through as they read the various content. First, I was trying to force placing an image in the HTML and then force a text box over it with absolute positioning. Not great and terrible for varying screen sizes! I knew I should use each image as a background-image in each section, but why wasn't it sizing the way I wanted it?

At last, my search on the Internet came to an end when I read about CSS3 backgrounds! In particular, the background-size property. I already knew about manipulating pixels and percentages. Yet that was getting me nowhere. What I did discover today were the values "content" and "cover". That was exactly what I had been looking for!

Now my images fill their designated sections and flow nicely together down the page, yet aren't considered a part of my content. Hooray!

CSS source code: #home{ background: url(http://www5.pcmag.com/media/images/410554-the-best-laptops-of-2016.jpg) no-repeat center; background-size:cover; background-origin:border-box; }

Stay tuned for my completed portfolio! If you haven't heard of Free Code Camp, which got me working seriously on my portfolio, you should go check it out! As the name suggests, it's FREE. It offers to take you through full-stack web development while you do hands-on work. After my portfolio is complete, I'll be moving on to back-end development next.