[Resolved] Background image size

[Sapir]

I set a background image at homepage to 40% size.
I liked the size at mobile, but at desktop It’s gigantic.

How can I set the size to 20% at desktop only, while keeping it 40% at mobile?

I tried the method written here. Nothing happend.

Here

[Elvin]

Hi,

You can try this CSS:

/* Background size CSS for Desktop and Tablet */
@media (min-width:769px){
.gb-container.gb-container-b58db5b2:before{
background-size: 20%;
}
}
/* Background size CSS for Mobile */
@media (max-width:768px){
.gb-container.gb-container-b58db5b2:before{
background-size: 40%;
}
}

[Sapir]

Hi Elvin, it worked.

But there is something else.
The picture size stays the same, while the screen resolution changes.
In my computer, which is connected to a 50″ 4K television, I see the image lower than my other computer who is connected to my 27″. My laptop 15.7″ shows kind of both, but is still stable.

In this case, the structure might break for some users who watch from differenet devices?

[Elvin]

In this case, the structure might break for some users who watch from differenet devices?

Ideally, when we create sites, the assets(images & graphics) for different viewports are prepared for their specific purposes(background, hero image, content image, on mobile, on desktop, on 1080p, on 4k, etc).

The problem here is, the asset file used as the background doesn’t seem to be tailor-fitted as a background image for multiple viewports.

To answer the question, yes it’ll look weird/broken on other different devices.

To address this, we either, create multiple assets that is tailor-fit for their specific purposes(tedious, may also need to hire a designer), or we settle with what’s doable with only using CSS with consideration to its limitations and potential issues(4k and 8k display).

[Sapir]

Hey,
I see. Thank you for the answer.

I didn’t cleared my cache + I am not really sure how and what it does.
It’s kind of a fresh site.
Any advantege in doing that?

[Elvin]

I didn’t cleared my cache + I am not really sure how and what it does.
It’s kind of a fresh site.
Any advantege in doing that?

You don’t have to if you’re not using one. 🙂

No problem. 😀

[Sapir]

Very wise indeed 🙂

Thank you.

[Elvin]

No problem. 🙂

[Sapir]

Hey.

The CSS suddenly stopped working for some reason.
Yesterday I played with it using the CSS.
Today it isn’t working, but it does work using the customizer.

Another question:

I had a button at homepage that was belong to the original theme style.
The command “Button” used for it.
When I created my button and used the same command, the button inherit the theme style (full Background, colors and that) and I coulde’nt change it.

What are those “CSS Classes”? How can I use those Classes for building the site? Where can I find another commands?

[Elvin]

Hi,

This seems like a completely different issue. Can you open a new topic about it?

We’ll make sure it gets addressed there. Thank you.

[Author]

Posts