Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How to set my header image as 100% of my view-port with css and vh

Im using WordPress with Elementor(Hello theme),

what im trying to do: Setting my Header image as 100% of my view-port with VH unit.

how i want it to look – https://ibb.co/0MQv2dZ. my results does not work. what am i missing? (check my website)

link: https://wordpress-288516-1301271.cloudwaysapps.com/example//

Thanks!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thank you. yes - now the image is 100VH from the view port. but now when im shrinking the window its not responsive the quality is lower. how i can keep the same quality?

    body{
    margin:0;
    padding:0;
}

.full-img-container {
   height: 100vh;
   width: 100%;
}

.full-img {
 max-height: 100%;
 width: 100%;
}
    <html>
<head>
</head>

<body>

<div class="full-img-container">
    <img  class="full-img" src="https://wordpress-288516-1301271.cloudwaysapps.com/wp-content/uploads/2020/09/Lirz-Cover.jpg" alt="image">
 </div>
 
</body>
 </html>


  2. 0

    Ok so what you are asking is this:

    • Html
    <div class="full-screen-img">
   <img src="https://wordpress-288516-1301271.cloudwaysapps.com/wp-content/uploads/2020/09/Lirz-Cover.jpg" alt="image">
</div>
    • CSS
    .full-screen-img {
   height: 100vh;
   width: 100%;
}

    But if you what it to look like the example there are a few thing to consider

    • Html
    <div class="full-img-container">
   <img class="full-img" src="https://wordpress-288516-1301271.cloudwaysapps.com/wp-content/uploads/2020/09/Lirz-Cover.jpg" alt="image">
</div>
<div>
  other content
</div>
    • CSS
    .full-img-container{
    margin: auto;
    height: 40em;
    /*
     *image height will scale automatically base on the width
     * so you can make it resposive easylly with the column classes
     * available in bootstrap for example or adding media queires to change
     * width % base on viewport current with
     */
    width: 50%; 
}

.full-img {
 max-height: 100%;
 width: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search