[Resolved] Backgrounds

I need to see the problem live.
I’ve asked to see the problem live many many times.
Please, explain to me why you can’t just save the image and show me the problem live.

There are no exact dimensions for an image to not be distorted when full screen, it would depend on the display size being used to view the site.

Good work.

This will be the result with Fit Screen no matter which theme you use. When you use Fit Screen, this is the CSS output from WordPress, not Polestar, from the WordPress core:

body.custom-background {
    background-image: url(https://clickmela.com/wp-content/uploads/2017/07/flowers-164860.jpg);
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

See this declaration: background-size: contain; Let’s look what that means: https://www.w3schools.com/cssref/css3_pr_background-size.asp.

Contain:
Scale the image to the largest size such that both its width and its height can fit inside the content area.

Across the content area being the key word. So, if you’d like, try this with another theme, you’ll see, the result will be the same. If you want the background image to stretch from header to footer you should try using Fill Screen rather.

Fill Screen will use: background-size: cover;. Let’s go look what that does:

Cover:
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

Summary: If you want to fill the entire area you must use Fill Screen because Fill Screen will use background size cover.

This is all expected.

Let’s look at your home page. The content length is 4055px long. But, your background image is 1272px long. In order to cover the entire area, yes, the background image has to be proportionally stretched, that is what is causing the pixelation.

There is no special solution for this. If you temporarily change themes you’ll see the result will be the same. It’s important to understand what is happening which is why I spoke about the different CSS background-size properties earlier and sent a link explaining.

So you’re with me? Content area of 4055px with background image of 1272px long (flowers) means pixelation. There is no way around this.

(If there is an example website that you are looking at, send me the link, I can look at what they have done and explain it.)

Are you asking if Meta Slider works in Polestar? If that’s the case, yes, Meta Slider works in Polestar.

The Polestar header offers a logo, a menu and a search icon. There is currently no way to insert a slider or a widget into the header.

There is a YouTube video on our channel that shows how the Ultra theme / Meta Slider integration works. However that video is for the Ultra theme, not Polestar. Ultra also can’t insert a Meta Slider into the header.