-
Posts
-
My apologies if this is obvious, but I can’t find any information on how to create the image effect shown on the theme.co/x/ website that autoscales that presumably Swiss landscape to the size of the active browser window. I’d like to replicate that effect.
Hi there,
Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.
Alright, here it goes.
Sample site: http://theme.co/x/
When that page (your page) loads, the hero image of the Swiss chalet in front of the mountains fills the entire active browser window. I call that effect “autoscaling” (I also see it as auto-scaling).
Change the size of the browser window and try it again. For example, make it tall and narrow. The image will autoscale while cropping the left and right sizes, still filling the window. Make the browser window bigger, make it smaller – always the same effect of the image filling the “frame” of the browser.
Of course, the navigation bar is always pinned to the bottom of the browser window in all of these scenarios.
So, my question remains – what tool or setting is used to accomplish this? Is it part of the X Theme or is it a 3rd party tool?
Hi there,
Thanks for updating. It’s just set as background of a section. You can add a background image to your section from Cornerstone – http://prntscr.com/aisv1e
Hope this helps.
Cheers!
Here is the start of my site: basechord.com
You will notice that I have a background image. That wasn’t the emphasis of my question.
Specifically, my question was how to achieve the effect of that image (section) filling the entirety of the active browser window, regardless of the browser window size.
If you compare the effect of the background image of theme.co/x/ and basechord.com, you can see the difference. The theme.co/x/ image dynamically resizes, scales, and/or crops to fit the whole of that section with background image in the browser window. That is what I want my image/section to do.
That is my question: How do I autoscale a section in X to fill the available browser window?
Hi there,
Thanks for updating. I can see it’s already fullscreen in width. Do you want to restrict the height to fit the screen? In that case you can place
max-height: calc(100vh - 60px);on the style field for the section.Hope this helps.
Cheers!
Okay, that worked – kind of. I achieved the goal I was after in the image filling the browser container. I tired your suggestion of max-height: calc(100vh – 60px); but I’ve simplified to height: 100vh; in the style field of that section.
However, the two elements – image and text – in the section now won’t align correctly. Although changing the padding and margin options show an alignment change in Cornerstone, it does not in the browser.
In Chrome, the top element (Microsoft Registered Refurbisher image) is hidden under the header from the outset.
In Microsoft Edge, it will load with the correct alignment, but the moment I touch the vertical scrollbar, everything is pulled up and under the header.
I have tried padding the column in the section – nothing. I have tried adding margin to the image – nothing. I’ve tried some inline styles – nothing.
I don’t want to lose the effect I was after with the autoscaling, but I also don’t want to move the image and text elements in the column onto the background image – that would break the effect on mobile devices.
Ideas?
Hi There,
To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.
Thanks.
As I previously mentioned in a comment above, the URL of my site is basechord.com.
Part of the problem appears to be the header “floating” over the top section.
The other part of the problem is that the use of the style height: 100vh; seeming to override the position elements on the image and text in the same section as the background image.
I’ve changed the setting on the header from “fixed top” to “static top.” That fixed a portion of the problem.
I’m still trying to figure out how to customize the positioning of the elements in the top section of basechord.com.
Hi There,
Would you mind sharing us a screenshot of what you want to achieve. Upon checking your setup, it seems to be looking fine.
Thanks.
