I did a second design iteration for my college a cappella group's website (www.nothingbuttreble.com). I used a lot of the web design skills I gained over the summer, including some HTML5 and CSS3. When I was working on this website earlier in the semester, my roommate said that she was seeing some bugs on the page with the images. With most of the images, I created a div and set the background image of the div to the desired image. Setting the image as the background of the div and using background-size property with cover and contain handles scaling images up and down depending on resolution, so it saves me some time and also makes the programming easier! I included a quick screen shot of what the top of the website should look like.
I went to do a quick cross-browser compatibility check with my dad's old 4x3 monitor, and ran into the same bug as before - the images were zoomed in, in the wrong proportions, and cut off. But why wasn't I seeing this on my own laptop?
It turns out that Firefox 9.0.1 supports the background-size property, and updating my dad's version of Firefox got rid of the bug. But this means that anybody without the latest version of Firefox (and probably anything less than IE9) will see this bug. Should my cross browser compatibility also support all previous versions, or is that the user's responsibility for not having the latest version of Firefox? But as a webmaster, is anything really the "user's fault" or is this just laziness and self-righteousness on my part? I think I may be able to handle this by prefixing "-webkit-" and "-ms-" into the CSS, so it could be an easy fix. But how many outdated versions of Firefox or IE should I really have to accommodate to, if at all?