Sir how we can input a background image from top to bottom without filling (pixel spread image shorten). Please
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.
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.
Sir now I have applied for fit to screen can u see the problem. Please answer where the image is coming full
I have upload and use fit to screen can u see the problem why image not coming tip to bottom
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.
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.
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.)
Meta slider work in free polestar theme
Are you asking if Meta Slider works in Polestar? If that’s the case, yes, Meta Slider works in Polestar.
In free version its not working for me how to bring the sliders in the header
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.
But I think I saw a vedio on YouTube slider in ur theme and how to input search bar
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.