Hi! I have big problem with resolution and background image. I don't know why, but BS show me f.e. 1200 px x 1852px (full website) when everybody knows, that most of screens are landscape (f.e. 1920 x 1080)... So, I have a problem with background image settings, most of all with background-size: cover / contain.
Is there any setting for screen?
Best regards Daniel
I'm not sure exactly what problem you're having with it.
The sizing you see in the app is related to the Bootstrap 4 frameworks predefined media query break points, not necessarily the resolution of your screen. https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
But a way to saw when the browsers viewport is at least 1200px @media (min-width: 1200px) { ... } then the following CSS rules and properties apply. It doesn't necessarily mean that your screen is 1200px wide, but to do when the screen is at least that.
You can create additional media queries in your custom CSS file to enhance/replace existing or even add styling. However, the app since it's based on the framework doesn't have a device setting for something like @media (min-width: 1900px) { ... }. You will have to view that in a preview setting in your browser.
For background-size property. https://www.w3schools.com/csSref/css3_pr_background-size.asp
cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain - Resize the background image to make sure the image is fully visible
https://css-tricks.com/almanac/properties/b/background-size/
Saj
I think I wrote something wrong... Width is OK. Screen height create error, because normally its 1080 px, here system count whole page and return f.e. 1800 or 5000 px... Then 'cover' setting is set for portrait... and background looks strange.
Again, like with the width it's not really screen height. It's the documents height.
When you use a background image on an element and set it to cover it fills that whole elements space. The BODY element contains all of the visual content in the document. It's height is not based on the browsers viewport or screen resolution. Although, by default the BODY element starts out as the documents viewport size, but it can effectively be increased both in width and height based on the contents within it. And that sizing can exceed the viewport and screen resolution.
So when your document has a lot of content that exceeds the viewports height, effectively the BODY element grows with it. Which in turn will cause a background-image to also stretch as well because you have the size set to cover.
It may work out better for you if you set the size to be the viewports size something like.
body {
background-image:url("bgimage.jpg");
background-size:100vw 100vh;
background-attachment:fixed;
}
With the above example, the background image is set to be 100% of the viewports width and height. And to help it stay looking nice that way, I also set it to not scroll with the rest of the body's content even if it exceeds the viewports height, the image retains the viewports dimensions.
The BODY element can grow/expand based primarily on the contents with it it. It's not limited to the viewport or screen resolution. Therefore, a background image set with the sizing as cover will then also grow/expand based on the contents within the BODY element.
Saj
I have a lot of clients (church clients these are) that love to have background images (large ones) on their pages. I've found that using the "Fixed" setting for the background is most definitely the best way to do it. this way you can use the 100% 100% for the size in most cases, and it will almost always work well. You may need to adjust the percentage if it skews at all, but it shouldn't. I've also resized the backgrounds to fit the screens better as well. The fixed setting is a big help though.