Need image to fill header space

Support
#1

Hi there, I’m trying to get the image in this header to fill the entire space: http://take.ms/Fv7ZZ.

You can see if I’ve got some CSS in there–am I targeting this thing correctly? This is my first build with the new controls and part of my confusion is if I’m setting it up right.

Thank you much!

#2

Hi @jstovallcollaborativ ,

Thanks for writing in.

I think width: 100%; should better instead of object fill. Images are usually fitted to its max, so you may apply max-width: 100%; too.

Thanks!

#3

Thanks, Rad. This is the result: http://take.ms/zZNRK.

Max-width centers it, but doesn’t get it to fill the space…

What am I doing wrong here? Am I using the $el incorrectly?

Thanks much for your help!

#4

Hi @jstovallcollaborativ,

I could see your code is correct however I believe you are using the wrong element.

The best way to cover a section with image. Use a section then add a background image to it Then add height to the section so that it will be shown.

Hope it helps.

Let us know how it goes.

Thanks.

#5

Ok, got it, and that’s mostly working–thanks!

In terms of adding the height, should I be doing that in the inspector or with a line of css? Still getting used to the new controls.

Appreciate the help!

#6

Hey Jefferson,

You need to setup the height via CSS. Inline or using the Element CSS. See https://youtu.be/MMeOS2kNtOI. In the screencast, you’ll see that you can cover the section with an Image element also. You just have to disable the Row’s Inner Container option and ensure there are no paddings in your section and row. This is mostly used when you want to show all the parts of your image and you have nothing else to add in your section. If you’re going to put elements on top of your image or want a fullscreen effect, you need to use it as a background. Just note that certain parts of your image will be hidden because your section will have different aspect ratios when viewed on different screen sizes and your image has a fixed aspect ratio. With that said, using the image as a background is not good if you have important information to show in your image.

Here’s the code to be inserted in the section’s Element CSS

$el {
  height:100vh
}

Hope that helps.

#7

Christian, sorry for the late reply. This is exactly what I needed. I’ve got it updated and working for this site. Your context is really helpful and also solves another problem I was encountering on a different project.

Thanks much to everyone here!

1 Like
#8

If you need anything else please let us know.

#9

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