Has anyone tried attaching an image in the circles? can you share how you did that?


#1

I wonder if anyone has successfully attempted the challenge to attach an image in the circles?


#2

Is this for a lesson or out of lesson project ?


#3

I just made an example
You can add in width, height, radius to fit to screen I just did basics you will need to do some customizing with CSS


#4

There are clear advantages to using CSS background, not the least of which is removing the bulky IMG element from the page. It also gets our skin images away from prying spiders so they don't get indexed.

The positioning of bg images is simple and flexible. Try doing that with an IMG element in the page. Get out the hammer. Witness...

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>IMG position test</title>
    <style>
    img { top: 100px; left: 100px; }
    </style>
  </head>
  <body>
    <img src="image.png" width="86" height="56">
  </body>
<html>

image.png

Notice that the selector rule is ignored? As written, <img> is a static element with no position property, until we give it one.

img { position: relative; top: 100px; left: 100px; }

We don't have this issue in the style sheet. Background images have a position property, on top of a whole range of other properties that make them incredibly powerful design tools.

It's also important to note that we cannot crop IMG's beyond using border-radius. The image is squished into the space given if the dimensions don't match the height and width attribute values. So many folks use the actual picture in a thumbnail size; and they wonder why their pages load so slow.

Hint: There is a thumbnail in the EXIF header.

We can put whatever size of image in the background and make it fit, or if too large for the viewport we've allowed, crop to fit. And we can still use border-radius on the crop. So we've position and crop without any special treatment, otherwise. And, no markup.

I could go on.

On an aside, what happens when you add a background-size property with value, cover? Does that negate the auto-repeat? Or do you still need a no-repeat property on background?