Background Image Size Height

Support
#1

Hi- I am looking for a way to have an image as top/hero image of this website: http://www.glenlochway.com/. I was using Slider Revolution but my client does not want to use that any longer so they can edit the section in Cornerstone.

Can you help me get the first section look like the following… I am looking to have the image maintain the size of 1200 x 600 in desktop and then resize in smaller screens if needed. There is a layer on the section that has the property address, headline and price that I would like to show at the bottom of the image. It looks ok right now but the section is too tall. I would like the section to maintain the size of the original image - right now it seems to be making the section much larger than 600 px height.

I would like to avoid having several sections for different screen sizes. It is ok to have the section have the full image in desktop and then crop out in mobile (but not be 600 px high in mobile either). If this layout is possible to do with an image section (not background) then let me know.

Here is an example of a site that is still using the Slider Revolution slide for the top/hero image: http://www.525edgewood.com/. I am trying to recreate this look but use Cornerstone only. Here is the site that has the background image: http://www.glenlochway.com/

Thank you for your help!

1 Like
#2

Hi There,

Thank you for writing in, with the image being a section’s background it is kind of tricky to keep its aspect ratio. If you really need that image to be responsive as the rev slider from here (http://www.525edgewood.com/) then you need to add the image as an Image element (not a background).

0 the paddings of your first section (where the image is placed) and turn off its Column Container option, also add a CLASS man to the image and width: 100%; to its STYLE field, this is to ensure that your image will take up the entire section with no gaps around.

Now the challenge is how we can put the addresses on top of the image, you can add a CLASS section-hero to your SECTION and a CLASS hero-caption to the second ROW (where the addresses is place) and lastly add this on your page custom CSS.

.section-hero {
    position: relative;
    max-height: calc(100vh - 110px);
    overflow-y: hidden;
}

.section-hero .hero-caption {
	position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

That offset value of 110px on the max-height might be off for your site specific, please change that where you see it fits.

Note: do not put a period on the class when assigning it to an element/section/row like what you’re doing here (http://prntscr.com/fsn1ty).

Hope this helps,
Cheers!

1 Like
#3

I was able to make the changes you suggested. However the address is not appearing on the image on large screens. It is appearing correctly on small screen but not on large screens.

Here is where I am working now: http://design1dev.lunghimediagroup.com/ - it is the 3rd hero image on the page.

#4

See my secure note (I am not sure if you can see the notes I added below)

#5

Hi There,

You are missing a closing bracket on your @media query css. Please address it.

screenshot

Thanks,

#6

Thanks for all your help. I got it working now!

#7

Glad to hear it’s sorted.

Cheers!

#8

I added a secure note to my last message with an issue I am encountering.

#9

Ignore my last message- I got the height issue figured out by adjusting the max height. I did not realize that might cut off the image but all looks good now.

#10

Glad all is good now.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.