Kevin Powell - Community•2mo ago

css questions

I’m a little bit confused about background images. Do I really need to use them as background-image, or can I just use an <img> tag and set position: relative? Also, I don’t like how background-image behaves when I resize the screen. https://codepen.io/etrbbr/pen/EaYJReE

CodePen

EaYJReE

...

5 Replies

Kevin Powell•2mo ago

You can definitely use a regular image, rather than a background image. Some people will suggest that you do, so that it's actual content on the page, which becomes available to screen readers, etc. Position relative might not be what you'd want to use though. Grid is usually my go to. Looking at that image though, my initial thought would be a background image right on the body

body {
  background-image: url(...);
  background-size: someValueIfNeeded;
  background-position: top right;
}

body {
  background-image: url(...);
  background-size: someValueIfNeeded;
  background-position: top right;
}

ἔρως•2mo ago

another thing that background images cant do (yet) is autoloading a smaller size based on the screensize also, im not sure if lazy-loading without js is possible with an image, you can do those and have an alt text (which background images cant do)

Zakurocer•2mo ago

Since that image looks like it's suited for design purpose, background-image might be the correct choice.

ἔρως•2mo ago

i agree with you

HelgiOP•2mo ago

thanks guys

Gaming

Programming

css questions

Did you find this page helpful?