Mobile Background not working

[mariusjopen]

Hi @jjk

1. try to upload your image in a lower filesize.
   It takes way too long until it is loaded.
   Photoshop -> save for web…

2. You need to add the code also in the Custom CSS for Mobile Version.

Let me know if that worked for you.

Best!

Marius

[jjk]

@mariusjopen

thanks for the reply!

1. the picture is only 322 KB, that cant be too much, can it?

2. i got it only in my custom css for mobile version.

did you see how it displayed, it quickly pops up crisp and then blurs and has this grey line on top, + it also scrolls, not fixed...

x Julian

[mariusjopen]

Hi @jjk

Ok, I see . but the loading is pretty slow in the desktop version.

I think the images gets blurred on mobile (not on the mobile-desktop version, actually only on the phone) because somehow it gets stretched I suppose.

I cannot really understand yet why and would need to look more into it.

I can do that but before please tell me why do you not use the regular way of adding a background image via the Gridder?

Best!

Marius

[jjk]

@mariusjopen

Yeah I also think it's stretching, don't know...

The gridder Backroundimage only apply to columns, so it will repeat with gaps where "row gutters" are and would also not be fixed...

I also tried to embed some html directly in the site, without success.

I would be very happy if you could look deeper into it, I'm already so much overdue with this timewise and kinda lost.

X Julian

[arminunruh]

Hey m8!

Why not just use "Customizer" -> "Mobile (Smartphone)" -> "Mobile Background Image"

[jjk]

@arminunruh

hey armin,

this is embarassing, hadn't updated and didn't have that option in my old version. works perfectly now.

Thank you!

[arminunruh]

Cool :) Aha

[marcelgross]

@arminunruh
I tried to put a background-image with your custumizer-option. But it displays very strange. Its only a small part of the original pic and shown as a bar...
Have you seen this problem before?

Thx

[mariusjopen]

Dear @marcelgross
can you provide us with a link to your website?

Best!

Marius

[marcelgross]

dear @mariusjopen

Here is the link https://podcastlab.marcel-gross.ch/szene/
I placed the background now with code

/* Hintergrundbild allgemein */
body {
  background-image: url("/wp-content/uploads/2019/01/scan-67_hellblau.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: 100% 100%;
}

@media only screen and (max-height: 900px) {
  body {
    background-repeat: repeat;
    background-position: center top;
    background-size: 110% 710px;
  }
}

This works as a not too beautiful solution, because I would like to have the picture stretched the same way as on the desktop-version... But it doesn't work with background-size 100%

[mariusjopen]

Dear @jjk
have a look here:

body {
    background-size: cover;
}

Does that help?

Best!

Marius