Docs

[Chgrim]

Hi,

I am trying to get the background image of my top section on this page http://www.chrisgrim.com/ to use the css cover. Yet I can’t seem to get it to work.

Thanks so much!
Chris

[Friech]

Hi Chris,

Thank you for writing in! All background-image is set to Cover by default. But background-size: cover; does not mean your background-image will fit on the container regardless of its size, read more about background-size: cover; here

You can also follow this post on how background-size works.

Let us know how do you want to proceed.

Thanks.

[Chgrim]

Ok then, let me ask you a different question as that didn’t help me achieve the look I am going for.

On this page http://www.chrisgrim.com/alignbottom/ I made a new section at the top and that background cover is working like it should be. The only problem is when I add the vertical-align: bottom; to the column so the words are at the bottom nothing happens.

Thanks so much
Chris

[Friech]

Hi Chris,

On that ROW please add min-height: 90vh;position: relative; on its STYLE field.

And add position: absolute; bottom: 0; on the Text element STYLE field.

Thanks.

[Chgrim]

that moved it down! The last thing I need to do is center it! How do I center the words?

Thanks
Chris

[Thai]

Hi There,

Please add this inline style:

position: absolute;bottom: 0;left: 50%;margin-left: -90px;

Hope it helps 🙂

[Chgrim]

Hi,

It did work to an extent. I am having trouble with the margin-left: -90px;. The problem is on different size screens the 90px moves the text over a different amount giving me a different look.

Also while I have you 🙂 There is a space between the word Surprises and the words Handmade Monthly beneath it. I tried the mtn mbn and still can’t remove the gap. Do you know of any way?

Thanks so much
Chris

[Rue Nel]

Hey Chris,

I am another staff checking on this thread. The section now gets complicated and it is difficult to correct. If I am gonna do what you have in mind, I would do it this way;
1] I will add a section along with the background image.
2] I will make sure that the margin and padding of the section is set to zero.
3] In the row settings, I will enable the column container and marginless column option.
4] Still in the row settings, I will add an inline css min-height: 100vh;
5] I will set up the text or what ever content for the column
6] Lastly, in the column settings, I will add an inline css vertical-align: bottom;

Please check out the attach Cornerstone template as an example.

Oh by the way, this link might also be useful to you: https://www.cstemplates.com/archives/fullscreen-section-128/

Hope this helps.

[Author]

Posts