Docs

[Anonymous]

Hi, please see sub.benhawkins.de

I want that start image fully sized in every display size.
Screenshot one; thats perfect, screenshot two, that happen when the browser window is smaller.

Screensh 1: http://ctrlv.in/760253

Screensh 2: http://ctrlv.in/760251

Is it possible to use a css code, to scale the picture always that way that the important parts of the picture (faces, people) are always visible.

And, which is the css to set when in which size the page changes to mobile mode.

Thx
A

[John Ezra]

Hi A,

Thanks for writing in! Parallax images adjust the height value to do the parallax effect so it’s a bit difficult to have the image adjust based on screen size. We will try, though, however, we are not seeing what you are seeing in screenshot 2 on our end. The image currently has a background-size value of cover. This means that on smaller screens parts of the image will be cut off so that the image can cover the whole size of the container. On our end, the issue is the image gets cut off from the sides but not from the top. This was checking via mobile devices.

However you can try the following CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:1355px) {
    div#home {
        background-size: contain;
        padding: 28.5% 0px 30% !important;
    }
}

@media (min-width:570px) and (max-width:1335px) {
    div#home {
        background-position:50% 14%!important;
    }
}

@media (min-width:521px) and (max-width:570px) {
    div#home {
        background-position:50% 13.5%!important;
    }
}

@media (min-width:411px) and (max-width:520px) {
    div#home {
        background-position:50% 13.5%!important;
    }
}

@media (min-width:336px) and (max-width:410px) {
    div#home {
        background-position:50% 12.6%!important;
    }
}

Hope this helps – thanks!

[Anonymous]

Hey, thanks a lot for your fast answer. I´m afraid that code didn´t solve the problem.
Maybe you can take a look again; I changed the picture (www.sub.benhawkins.de). No if have all faces on line, and maybe it´s easier to scale the image when the browser gets smaller.

I have another page (smokestacklightnin.de) with x-theme and there I found a acceptable solution, but in this case I don´t get ahead.

The size at the moment is perfect on the size of my macbook, if I shrink the browser, the image will be cut.
Maybe there is a possibility to let the system cut the picture from the bottom?

Thx for you efforts.
A

[John Ezra]

Hi A,

Thanks for updating the thread! I just tested the CSS I provided with your new image. It works well on my end. Not sure what you are seeing on your end. Would you mind providing screenshots of what’s happening so we can troubleshoot further? Additionally, the two sites have two different setups for the images. Your site in question has the background image set as parallax. The reference site doesn’t.

Let us know how that goes. Hope this helps – thanks!

[Anonymous]

Hi, I added the code again. Here you can see how it looks like:

Screenshot 1, full screen. picture moves up a little and has white areas left and right. http://ctrlv.in/761140

Screenshot 2, I resize the browser, the picture is been cut off on the top, and there is a white area under the picture. http://ctrlv.in/761137

Screenshot 3, the more I make the browser smaller, the bigger is the white gap.
http://ctrlv.in/761138

Thx for help
A

[Lely]

Hello A,

Please check this part of your custom CSS first:

.desktop .sub-menu {
    background-color: #000;
}

}

Please update to this:

.desktop .sub-menu {
    background-color: #000;

}

That extra closing curly brace is considered syntax error.
Then update this part:

@media (max-width:1355px) {
    div#home {
        background-size: contain;
        padding: 28.5% 0px 30% !important;
    }
}

To this:

@media (max-width:1355px) {
    div#home {
        background-size: cover;
        padding: 28.5% 0px 30% !important;
    }
}

Hope this helps.

[Anonymous]

Thx, we are def. on the right way.
In fullscreen it looks good, also on my mobile.
Only, if I make the browser window small it looks like this:
http://ctrlv.in/761174

Thx
A

[Lely]

Hi There,

Please also update this:

@media (min-width:336px) and (max-width:410px) {
    div#home {
        background-position:50% 12.6%!important;
    }
}

To this:

@media (max-width: 410px) and (min-width: 336px){
div#home {
    background-position: 50% 34.6%!important;
    padding: 28% 10% !important;
    background-size: contain;
}
}

Hope this helps.

[Anonymous]

Hi, thanks for the support.
Now I have a white space over the image, if I shrink the browser, and on my mobile device there is a white space on left and right site of the image.

I could live with the space in the browser, if the it would be black, not white.
And also on the mobile device, if it is to difficult to find the solution for all screen sizes.

Thx
Andre

[Anonymous]

sorry, forgot the screenshot: http://ctrlv.in/761404

[Joao]

Hi Andre,

Please change this:

@media (max-width: 410px) and (min-width: 336px){
div#home {
    background-position: 50% 34.6%!important;
    padding: 28% 10% !important;
    background-size: contain;
}
}

to this

@media (max-width: 410px) and (min-width: 336px){
div#home {
    background-position: 50% 20%!important;
    padding: 28% 10% !important;
    background-size: contain;
}
}

Hope that helps,

Joao

[Anonymous]

Hi, everything looks ok now, when I shrink the page.
Now the last thing (I hope so).
In screenshot the height of the image is the I want it.
http://ctrlv.in/765848

If I make the browser window a little bigger (screenshot 2) the height gets smaller
http://ctrlv.in/765849

and if I make the browser window fullscreen, on a huge monitor it looks like screenshot 3.
http://ctrlv.in/765850

I want to have it like screenshot 1,when I make the browser bigger.
Is that possible?

Thx
Andre

[Rad]

Hi Andre,

The issue is that the height remains as is while width changes. Aspect ratio isn’t maintained. And because it’s parallax background, then it doesn’t respond to width or height, but on scroll.

Try adding this, this will also disable the parallax.

  .home #home {
  height:0px !important;
  padding: 0 0 50% 0 !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: initial !important;
  }
  .home #home .x-container {
  display: none;
  }

Thanks!

[Anonymous]

seems to work. thank you

best wishes
andre

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts