Background vs. Background-Image

I Need Help
1

Hey,

I hesitated quiet a time asking this, 'cause I am sure this must be a matter asked a lot, but still I was not able to find an answer despite my efforts to not bother you asking something that basic.

I design and manage a homepage for my girlfriend who is a singer and like to have Images of her as backgrounds for segments.

The Problem

  1. Backgrounds are no Images, so they won’t show up on google as Images. Is there a way to tag them as images?

  2. How can I make the background Image dynamically Shrink with the screen size instead of being cut?

  3. When I instead try to use Images, I can’t get them to fill the whole page, there are always boarders left and right.

  4. How can I have Images fill the background of a bloc and have them (with content) dynamically shrinking instead of being cut?

I’m pretty sure this is quite basic and I’m very confused I can’t figure it out. Thx for the help!

2

Hi @mr.birdy

A quick description of what I do - but as a background there will be an amount of closure on the image, but you can change images across breakpoints to make the subject more focal.

  1. I create a class and apply this to the bloc.
  2. Create images that fit those break points nicely so you have good content on the edited images. You could do a different image per breakpoint! just to mix things up. Apply this images to the breakpoints on the class background.
  3. Make sure your images are sized good and optimised too.
  4. I always use quality images where the subject is central or just off centre slightly so it still looks good.
1 Like
3

Thank you very much for the kind respond!

What you say is something I already did, but didn’t help with my main problem:

I want the background images to be images and not a background. So they would appear on google search.

Also I wonder if there really isn’t the possibility to have a fixed content that shrinks entirely when resizing the window and only changes for each breakpoint? It seems like such a convenient way to handle it the lazy way.

It’s just something I can’t believe not being easy to create and being done relatively often :sweat_smile:

Anyway, thx for the effort!