New to the community? Start here

CSS positioning an image and it's correct sizing

Hi, at my website i have a photo of man in first section (he is actually background of .row-main element in first section), but the problem is, that the positioning is not correct and I’m not sure, how to fix it.

Needed is:

– position at very bottom-right corner of .row-main div element

– the section (#vranany-zakladni-informace) containing it should be min-width: 100vh (and ideally)

– the picture should not be bigger than height of .row-main is

illustration here

I don’t know, how to force .row-main be height calculated on base: section height (which is vh) – header height (which I don’t know, there can be anything) or just simply, how to extend it for all space available until reaching vh.

Tue, 2 Dec 2014 23:37:09
  • Vinod Dalvi
    • WP Unicorn

    Hi @Karolina,

    Thanks for posting on the forum.

    I think now it’s displaying as you wanted to.

    Have you managed to display it like so?

    If not then please share me the screenshots of the page descrining how it’s displaying now and how you want it to display?

    Please advise.

    Kind Regards,

    Vinod Dalvi

  • Karolina
    • The Bug Hunter

    Hi, Vinod,

    I’m not sure if we’re talking about the same thing. I need to position an image – for example one which is actually loaded at the page (but there can be something with different proportions, it’s my client who’s going to decide).

    You’re still focussed on position that image which is there, but I need general solution for the “portret” illustration.

    I think, that there should be way how to fit the .container to the height which remains for it in the section if there is no more content to make it “longer”.

    If the image is smaller, it have to be at very bottom and the right of the corner of the container.

    I hope it’s more clear.

  • Vinod Dalvi
    • WP Unicorn

    Hi @Karolina,

    Have you tried using the CSS code that i have provided in my previous reply?

    Please share me the screenshots of exactly how you want it to display on different screen sizes by doing some graphics work and placing that image on the exact position there.

    Also please tell me in general word where you want to display it and what you want to achieve. Don’t refer any div, container or anything technical that is creating barrier in our communication.

    I hope you understand this.

    Regards,

    Vinod Dalvi

  • Vinod Dalvi
    • WP Unicorn

    Hi @Karolina,

    Thank you for sharing the screenshots.

    From your shared screenshot what i understood is currently there is some space below the image therefore the image is not displaying at bottom of gray part of website (bordering with yellow).

    To display it at bottom of gray part of website (bordering with yellow) try using the following CSS code.

    body div.bg-image {
    
padding-bottom: 0 !important;
    
}

    Best Regards,

    Vinod Dalvi