2 Replies - 103 Views - Last Post: 27 May 2019 - 06:52 AM

#1 dhebard   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-May 19

Image moving on vertical resize of page

Posted 26 May 2019 - 08:53 AM

My issue is that when the browser is resized vertically the image moves up in the window instead of staying put. I know it is in the CSS, but I can't seem to locate the issue. You can view this behavior at www.northwestgeorgiaregionalfair.com/index1.html. I would appreciate any help.

If this is not the appropriate place to ask this question, please direct me to the appropriate space.

HTML:

<header>

        

        <nav class="nav-color">

             <div class="row">

                    <a href="http://www.northwestgeorgiaregionalfair.com">

                        <img src="resources/img/logo%201.svg" alt="NWGRF Logo" class="logo">

                    </a>

                    

                    <ul class="main-nav js--main-nav">

                        <li><a href="/index.html">Home</a></li>

                        <!-- <li><a href="/about_us.html">About Us</a></li> -->

                        <li><a href="resources/documents/spc_registration.pdf" target="_blank">Vendor Registration</a></li>

                        <!-- <li><a href="/fair.html">The Fair</a></li> -->

                        <!-- <li><a href="#">Information</a></li> -->

                    </ul>

                    <a class="mobile-nav-icon js--nav-icon"><i class="ion-ios-menu"></i></a>

                

                </div>

        </nav>

        

        <div class="container">    

            <div class="hero-text-box">

                <img class="sponsor_img" src="resources/css/img/ssc_sponsor_graphic.jpg" alt="Mohawk Sponsor">

                <!-- <h1>Mohawk Presents...</h1>

                <h1> A Star Spangled Celebration!</h1>

                    <div class="long-copy">

                          <p>

                          Join us as we celebrate America's Birthday with a Star Spangled Celebration, sponsored by Mohawk. It will be an evening of great fun, food, fellowship, and celebration. This year, in addition to fantastic fireworks, we will have our first ever Laser Light Show, brought to you by Santek Waste Services.  Gates will open at 5:00 PM.      

                          </p>

                    </div>

                <a class="btn btn-full" href="resources/documents/spc_banner.pdf" target="_blank">Learn more</a> -->

            </div>

        </div>

        

    </header>




CSS:

header {

     

    /* background-image:  -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)) ), url(/resources/css/img/ssc_sponsor_graphic.jpg);

    background-image:  linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(/resources/css/img/ssc_sponsor_graphic.jpg);

    background-size: cover;

    background-position: center;

    height: 100vh;

    background-attachment: fixed; */ 

    height: 100vh;

    

}

.hero-text-box {

    position: absolute;

    height: 650px;

    width: 1140px;

    top: 50%;

    left: 50%;

    /* font-family: Fredericka the Great, sans-serif; */

    transform: translate(-50%, -50%);

    text-align: center;

    margin-top: 20px;

    margin-bottom: 20px;

            

}

.sponsor_img {

    max-width: 100%;

    max-height: 500px;

    height: auto;

    text-align: center;

 
}




Thank you.

This post has been edited by modi123_1: 26 May 2019 - 08:59 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Image moving on vertical resize of page

#2 modi123_1   User is offline

  • Suitor #2
  • member icon



Reputation: 15077
  • View blog
  • Posts: 60,210
  • Joined: 12-June 08

Re: Image moving on vertical resize of page

Posted 27 May 2019 - 05:58 AM

Perhaps pop your div with the giant image outside of the 'header'.
Was This Post Helpful? 0
  • +
  • -

#3 dhebard   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 26-May 19

Re: Image moving on vertical resize of page

Posted 27 May 2019 - 06:52 AM

Thank you for your suggestion modi123_1. I was able to fix the issue by placing the image within a new container, still in the header, and setting the position of the parent container to relative.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1