Responsive background image for the whole site

Hi Rikard,

thanks for helping.
Could you please tell me which image sizes are the correct measures for the 3 current responsive resolutions? (big screen, tablet, smartphone)

I’ll try something like this:

html {
  background-image:url('https://mysite/image.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  -moz-background-size: contain;
}

And I need the media queries for max-width: 767px and also 479 px. Do I have to change the background-size to
background-size: cover!important; for the smaller resolutions?

Best regards,
Dirk

• This reply was modified 5 years, 8 months ago by diggital.

Hi Rikard,

the code I tried above doesn’t work. I don’t see any background image and still a white background on the site. Do I have to change the theme settings to get the site transparent are something – so that the background image is showing up or do I make an error in reasoning?

I want to use a huge image that covers every big screen without being repeated and also like to know the 2 other resolutions, because I want to change that image depending on the device. So for max-width: 767px I want to change the image to a smaller one:

@media only screen and (max-width: 767px) {
  background-image:url('https://mysite/image-767px.jpg');
  background-size: cover!important;
  -moz-background-size: cover!important;
}}

Is this code correct? How can I get the background image visible?

Best regards,
Dirk

Hi Rikard,

thanks, yes I forgot the target, but why is the code in general #post-1084994 not working/showing the image?

And what about this?

I want to use a huge image that covers every big screen without being repeated and also like to know the 2 other resolutions, because I want to change that image depending on the device.

Best regards,
Dirk

Hi Ismael,

of course I linked to the correct image file, but it doesn’t show up.
And the image size: It must be the better solution to have 3 instead of using a very large one, even if it’s optimized?
Furthermore I want to control the displaying details of the image, therefore 3 images

Using an image with 2560 × 1600 px (30 inch) should be large enough to cover any screen?

I hope you have an idea to fix the background image issue?

Best regards,
Dirk

Hi Ismael,

I posted the code in the private field. I’m very curious why the background image is not visible?

Best regards,
Dirk

Hi Ismael,

I posted the credentials in the private field.
Hope this helps?

Best regards,
Dirk

Hi Ismael,

this was exactly what I was already asking for here #post-1085822
So please tell me, where I can set the backgrounds to transparent, I couldn’t find it in the settings yet.

In the theme settings I can only set background colors, clear it, but can’t set it to transparent?
In the page settings of the Avia Layout Builder there is also nothing for transparency that I found. We used a grid layout and the only thing I found is a colour section setting referring to the main content of the theme settings.

Could you integrate the site’s transpareny in the theme settings? Also the option of selecting a site wide background image would be great for future projects.

Best regards,
Dirk

Hi Ismael,

this works now, but still doesn’t look that good. The image sizes I chose also don’t look as expected, that’s why I asked for the correct resolutions.
My media queries don’t seem to work, it should be possible to see 3 different images when changing the browsser size, but I only see one image?

What about this:

Could you integrate the site’s transpareny in the theme settings? Also the option of selecting a site wide background image would be great for future projects.

There was a page where one can post ideas for future implements…

Best regards,
Dirk

Hi Ismael,

thanks, I set it to “cover” now and I can see the big image in the desktop size covering the whole page.
I tried to set the target, but there is still no difference when changing the browser size. Could you please check again what’s wrong?

@media only screen and (max-width: 767px { html {
  background-image:url('https://co-creative-group.de/wp-content/uploads/2019/04/hintergrundbild-767px.jpg');
  background-size: cover!important;
  -moz-background-size: cover!important;
}}

Best regards,
Dirk

Hi Ismael,

it’s working now, thanks!
So if there is no other solution for getting the transparency, this is solved.

What about this:

Could you integrate the site’s transpareny in the theme settings? Also the option of selecting a site wide background image would be great for future projects.

Can you post the link where I can post my ideas for future implements in the Enfold theme?

Best regards,
Dirk