Section height

[Marko]

Hello guys,

I don’t seem to find anything related to setting the height of a section.

I just want 4 sections that link to specific categories. For every section I have a background image. All of the images have the of 1500x500px. Above this image just a short text, a sentence or two. It just has to look good.

But when I insert the background image it’s automatically very slim and just show a slim stripe of the image.

Is there like a recommended background image size? Do I have to edit the CSS in order show the background image normally? Any tips?

Here is a screenshot: https://drive.google.com/file/d/0B5Fus0stire6VFJUUnpCVFZTbk0/view

[Jean Paiva]

Hello Marko,

You can specify top padding and/or bottom padding for each section:

The value is Pixels.

[Marko]

Hey Jean,

well it looks like this is the easiest option. It also affects the position of the text, but then I have to change the bottom padding or add a nbsp in the text. For now I can live with this solution.

One more question while we are talking about section: Can I set the whole background image as a link?

Thanks a lot, Marko

[Jean Paiva]

You plan to use for all sections a diferent link, or want in only one section? Maybe I can come up with something based on your needs.

[Marko]

Yes, every section should link to a different category. 4 sections should link to 4 different categories. That would be the best option probably.

Let me know if you have something.

Thanks a lot, Marko

[Tom]

Hi Marko,

Definitely tough to achieve..

One option, maybe..

1. Add an image to your section with a link around it:

<a href="http://generatepress.com"><img src="URL TO FULL BACKGROUND IMAGE" alt="" class="full-section-bg"></a>

Then add this CSS:

.full-section-bg {
    height: 100vh;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100vw;
}

Just a theory – but it may work.

Let me know 🙂

[joecocker]

Hey Tom, warming up this topic a bit because my question is related to section height as well:

I have some sections with an inclusion of dynamic content with differing height, so I need a dynamic height for this content – otherwise the content is hidden. So, is it possible to have a dynamic section height, perfectly growing with its external content

? You can see this here: http://www.haus-jasmin-buesum.de/apartments/ …

Would be nice to have and thanx a lot in advance
Juergen

[Tom]

Element heights will adjust to their content by default – the more content/padding, the taller the element will be.

[Author]

Posts