Dealing with Images

Images seem to be the only element that can be both in an HTML and/or CSS document(s)*. My brain, thinking this is super philosophical (thank you UofT!), congratulated itself for coming up with this great idea hours before midnight on a Saturday. #codinglife. This would make a great id name, btw. Anyways, moving on…

It’s pretty neat that images can do this. Pondering on this thought some more, I realized that images in an HTML document is very different from using a background image in CSS.

This revelation came from a real life situation I faced. The project I worked on had 3 sections, all taking up 100vh. In one section, I wanted to place an image. Automatically, I assumed the image would go in the HTML document because it’s initial intent was not for it to be used as a background image. The image, though, was to take up height:100vh.

The layout is as follows: two sections, one being width:70%, with the colour red and the other, width:30%, with the colour green. Each section is floated left.

The image goes in the green section. When I placed the image inside the HTML document, nested inside the green section, the image is way too tall, and does not line up with the end of the red section.

This presents a huge issue. The height of the other section does not have enough content to reach the bottom of the image.

I then decided to remove the height:100vh from the section, and place it on the <img> itself. This technique worked better, however, the image is not the entire width of its section.

If I made the image 100% in width, the image stretches un-proportionately.

Frustrated, I try another option: give the section a background-image in the CSS document. I give the section a property and value of background-size:cover;, that way, the image will fill up the section nicely.

Huzzah! It worked! The image is cropped, yes, but it is proportionate.

It looks like when you put an image as a background image, in a section with a specific width (basically any area less than 100% in width), you compromise by having the image cut off. Though, it does make for an interesting composition. If there is a specific area of an image you want to show, I guess you’d have to play around with the size of the actual image itself in a photo editor. More importantly, the section is filled up, it reaches the end of the section to the left of it.

*I have not done much research into this yet; please do not take this at face value.

**Also, this post does not represent my design choices in any way shape or form. I would never ever put green and red backgrounds beside each other.