Resolved

Backgrounds

Polestar Theme started by clickmela Jul 21, 2017 28 replies
clickmela Jul 21, 2017 · 8:46 am #7372

Sir how we can input a background image from top to bottom without filling (pixel spread image shorten). Please

Andrew Misplon Puro Jul 23, 2017 · 4:04 am #7390

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.

Andrew Misplon Puro Jul 23, 2017 · 4:32 am #7391

With regards to this question:

My next question is when we choose picture to apply fill to screen format ,it applies full top to bottom(except header & footer) but the quality reduced like blur image or pixel spread or tear even full image doesn’t appear it crop the image automatically

There is no dimension I can offer you that was cause no blur. Each monitor/screen/display being used by each person has different dimensions. The solution is to use a background image that is bigger than the one you are using now.

Try this image as a demo:
https://demo.purothemes.com/polestar/wp-content/uploads/sites/4/2017/03/site-speed.jpg

Download it. Upload as a background image. Use Fill Screen as the Preset and select to center position. Does that display nicely on your screen? If the answer is yes then use similar dimensions. That image is 1440 × 1019.

clickmela Jul 23, 2017 · 5:04 am #7392

Sir now I have applied for fit to screen can u see the problem. Please answer where the image is coming full

clickmela Jul 23, 2017 · 5:06 am #7393

I have upload and use fit to screen can u see the problem why image not coming tip to bottom

Andrew Misplon Puro Jul 23, 2017 · 5:10 am #7394

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(http://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.

clickmela Jul 23, 2017 · 5:40 am #7395

I have tried in custom top left right. Etc. Its not working slight position change and when we apply fill screen see the result live. Now. Plz help. See pixel tear and full image content not appearing.

Andrew Misplon Puro Jul 23, 2017 · 5:45 am #7396

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.)

clickmela Jul 24, 2017 · 3:33 pm #7397

Meta slider work in free polestar theme

Andrew Misplon Puro Jul 24, 2017 · 3:35 pm #7398

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

clickmela Jul 24, 2017 · 3:43 pm #7401

In free version its not working for me how to bring the sliders in the header

Andrew Misplon Puro Jul 24, 2017 · 3:47 pm #7402

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.

clickmela Jul 24, 2017 · 4:03 pm #7407

But I think I saw a vedio on YouTube slider in ur theme and how to input search bar

Andrew Misplon Puro Jul 24, 2017 · 4:05 pm #7408

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.

29 posts