[jeanetteleblancParticipant]

Hi. I’d like to create a header image for my homepage with text and button overlay – like the one in the image mockup below.

Is this possible – i searched the knowledge base but kept finding answers that relate to visual composer

Thanks
Jeanette

[jeanetteleblancParticipant]

https://www.dropbox.com/s/8ghljgpzyn2h8at/squarespace%20mockup.jpg?dl=0

[Rue NelModerator]

Hello There,

Thanks for writing in!

Yes, this is possible! You can edit your homepage in Cornerstone and easily create this section. Please create a new section and drag it to the top so that it will be the first section. In the section settings, add your background image (the girl), add some padding to create a space both on top and bottom of the section. You can then add just one column in this section. Using the custom headline, text and button element, you can insert them in the column. Just make sure that you align them at the center.

Hope this make sense.
Please let us know how it goes.

[jeanetteleblancParticipant]

I’m sorry – i still think i’m a bit confused….so where do i add the column with the text and button so that it overlays the image and doesn’t post above or below? Just want to make sure I am clear. I couldn’t seem to get it right when i was playing.

Also – does the image have to be set a certain size to display in a section – when i was trying last night it kept getting cut off.

Thanks
Jeanette

[RadModerator]

Hi Jeanette,

It would best if I could create a sample for you. Please provide your admin login credentials in private. Then I could explain them 🙂

Thanks!

[jeanetteleblancParticipant]

Thanks – i think i have mostly figured it out 🙂

However, on mobile the image is cut off so that my face in the header is cut off – is there a good way to remedy this?

[Rue NelModerator]

Hello There,

Thanks for writing in! 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.

For the meantime, you can try to add a custom css to your section.

@media (max-width: 979px){
  #x-section-1{
    background-position: center left;
  }
}

Hope this helps. Kindly let us know.

[jeanetteleblancParticipant]

Hi,

Thanks for all your help.

my url is http://www.peacelovefree.com

here are some examples of the header issue.

One other small mobile issue is in the subscription bar i have below the header on the first page.
There is a large space between the text and the email field, and then the button is cut off at the bottom.

any input appreciated, thanks.

[LelyModerator]

Hello There,

Thanks for posting in. I can’t see your screenshot. You can upload it here:http://tinypic.com/?t=postupload
About the mobile issue on subscription, please add the following mobile specific CSS on Appearance > Customizer> Custom > CSS

@media (max-width:  767px) {
.page-id-4995 div#x-section-2 div > div:first-child {
  padding-bottom: 0px !important;
  
}
.page-id-4995 input#mc-embedded-subscribe {
  margin-bottom: 20px;
}
}

Hope this helps.

[jeanetteleblancParticipant]

https://www.dropbox.com/s/pmjdit5k2muzb3n/File%20Jun%2029%2C%203%2003%2032%20PM.png?dl=0
https://www.dropbox.com/s/ezkuox4xnuo9nxl/File%20Jun%2029%2C%203%2003%2021%20PM.png?dl=0
https://www.dropbox.com/s/r4fedh0rthp7e72/File%20Jun%2029%2C%203%2003%2003%20PM.png?dl=0
https://www.dropbox.com/s/u3tgpqpxyft06pj/File%20Jun%2029%2C%203%2001%2005%20PM.png?dl=0

Here are the links to the images.

[jeanetteleblancParticipant]

I added the above code but am not seeing changes on mobile. For reference here is the custom css that’s already been added for various issues given via this forum

.x-navbar {
position: fixed !important;
top: 0;
left: 0;
right: 0;
}

.woocommerce.single .entry-wrap {
display: block;
padding: 60px;
}

@media (min-width:979px){
form#mc-embedded-subscribe-form {
display: block;
margin: 0 auto;
max-width: 500px;
}

input#mce-EMAIL {
float: left;
margin-right: 33px;
}
}

@media ( max-width: 320px ) {
.x-navbar .x-brand {
font-size: 20px !important;
}
}

@media (max-width: 767px) {
.page-id-4995 div#x-section-2 div > div:first-child {
padding-bottom: 0px !important;

}
.page-id-4995 input#mc-embedded-subscribe {
margin-bottom: 20px;
}
}

[ZeshanMember]

Hi there,

As you’re using background image on a [content_band], a css property of background-size: cover is applied to it that makes sure to expand the image vertically and horizontally without loosing its proportions. This sometimes leads a background image getting cut-off from edges of its container.

If you want to show full without loosing its proportions, you can add following code under Custom > CSS in the Customizer, though it might leave some blank areas to the sides of the image:

.x-content-band.bg-image,
.x-section.bg-image {
   -webkit-background-size: contain !important;
   background-size: contain !important;
}

Thanks!

[jeanetteleblancParticipant]

That code left me with this – which does not work well either

https://www.dropbox.com/s/9zxq1fi531fajhu/File%20Jul%2002%2C%2010%2052%2033%20PM.png?dl=0

Any other options you know of?

[Paul RModerator]

Hi,

Yes, It is because it is maintaining the image proportion, so when the image width reduces the height reduces too.
If not your image will look distorted. I would say your best option is the current behavior which is background-size: cover;

You can also try adding the text and button into the image itself using an image editor then add your image into your page using the image element and link the image to your writing coach page. That way the image that has text and button will resize as a one element.

Hope that make sense.

Thanks

[Author]

Posts