Hello team, I would like to have a picture in a container, which does not scroll but stops until the container has scrolled up. how does it work?
further question: where can I get a list to adjust the possible settings for size and position? since I have to enter text (for example, cover, center, etc.). which values are possible?
further question: how do I get a plugin into a container (for example mailchimp)? this is not offered in the tab elements.
thank you very much!!
Hi There,
1- Are you referring to a background picture with Parallax?
If yes, you can select an image as a your background lower layer, for example, and toggle parallax for lower layer and add 150% zoom for example. If you are referring to something diffrent please provide an example.
2- It is a bit confusing your question, but you would need to learn CSS. There are some CSS which will apply to text, other to many elements, other to background specifically, please provide a more detailed explanation of what you are trying to achieve.
3- You can add a raw code element and place the shortcode generated by the plugin there.
Sometimes it wont render inside in Cornerstone but might render on the live site.
Hope it helps
I have also been searching all over the web to find out what terms like ‘cover, center’ can be used in the size & position fields to no avail. Is there a source that at least explains exactly what each term means?
I’m trying to create section seperators with a parallax effect. In short, a background image (1400 x 400) going fullwidth with a transparent top layer showing the section header name.
I have the inner container turned off and everything looks fine in cornerstone but then on the live site I only see a small sliver of the image going fullwidth.
Hello There,
Thanks for updating in!
I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.
we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.
Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.
Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.
Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.
Hope this explains the background image property briefly. Thank you for your understanding.
Thank you for the detailed reply. Yes the demo is definitely useful. So looking at the screenshot below, would you suggest I type ‘background-size: 100%’ in the first field and ‘cover’ in the second? 
Sorry if that comes across as a ridiculous question but I’m trying to learn. Thank you again.
Hi there,
No, the second input box is related to the position and not the size.
In the first input box you can add combinations below:
cover
contain
100%
100% 100% (Or whatever percentage, a space between the 2 values and the percentage can be anything)
10px 50px (You can use pixels instead of percentage.)
1100% 40px` (You can use the combination)
The second input box is for the positioning of the background it can be for example:
center center
top center
top right
…
or You can use percentage:
50% 30%
or Pixels:
60px 30px
or the combination of percentage and pixels"
100% 40px
Thank you.
Fantastic. Thank you so much for that detailed breakdown.
Have a great day
Glad to hear we managed to help!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.