CSS Background Image too High

http://restechsys.com/staging/portmoth.html

The background image shown here should fit the page. You should be able to see the entire bottle on the screen. I have an overflow of hidden in the body tag and the background image in the wrapper. THe one on the left is what it should look like and the one on the right is what i’m getting.

CSS

 *{
    margin:0;
     padding:0;
}

   /*  body{overflow:hidden;}	*/
 @font-face {
     font-family: "hoefler_text_regular-webfont";
    /*src: url("fonts/CustomFont.eot");
    */
     src: url("fonts/hoefler_text_regular-webfont.woff") format("woff"), 
    /*url("fonts/CustomFont.otf") format("opentype"), url("fonts/CustomFont.svg#filename") format("svg");
    */
}
#flex {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 50px;
    background-image: url("../DAK_BG.png");
}

 .hero {
     background-image: url("../DAK_NV_CH_PN_Beauty_Outshinery.png");
     height: 370px;
     background-position: right;
     background-repeat: no-repeat;
     background-size: cover;
     padding: 0;
     margin: 0;
     width: 100%;
}
 
 #main-left {
   /*  position: absolute;*/
     padding-top: 0px;
     padding-left: 25px;
     width: 100%;
     padding-right: 25px;
     background-image: url("../DAK_BG.png");
     text-align:center;

}
.mainBottom {
	padding-top: 0px;
     padding-left: 25px;
     width: 100%;
     padding-right: 25px;
     background-image: url("../DAK_BG.png");
     text-align:center;
     font-size:10px;
 }

 img{
     width:100%;
}

#header {
    font-size: 0.8em;
    float: right;
    padding: 30px;
}
 #footer {
     /*position: relative;
     margin-top: 15px;
     height: 50px;*/
     width: 100%;
     text-align: center;
     font-size: 0.8em;
     background-image: url("../DAK_BG.png");
     bottom:0;
   color:#B66F07;

}
 .about {
    color:#B66F07;
     font-family: "hoefler_text_regular-webfont";
     text-transform: uppercase;
}
/*.links {
    font-size:15px;
     font-family: "Garamond"
}
*/
 .bottom {
    font-size:15px;
     font-family: "Garamond";
   color:#403F3C;
}
.ital {
    font-style: oblique;
    padding-bottom: 15px;
    color:#403F3C;
}
 .ital:after{
     content: "";
     display: block;
     margin: 0 auto;
     width: 40%;
     
     padding-top: 20px;
     border-bottom: 1px solid black;
}
 .currentRelease:before {
     content: "";
     display: block;
     margin: 0 auto;
     width: 40%;
     padding-top: 20px;
     border-bottom: 1px solid black;
}
 .currentRelease{
    margin-bottom:35px;
}
 .allocate::before {
     content: "";
     display: block;
     margin: 0 auto;
     width: 50%;
     border-bottom: 1px solid black;
}
 .allocate:after {
     content: "";
     display: block;
     margin: 0 auto;
     width: 50%;
     border-bottom: 1px solid black;
}
 .allocate p{
    height:36px;
}
 .height h5 {
    line-height: 0px;
}
 .language p{
    text-transform: uppercase;
     font-family:"Garamond";
}
 .allocation {padding-bottom: 10px;}

#flex { display: flex; flex-direction: column; }
.image{ order: 1; }
.about { order: 2; }
.currentRelease { order: 3; }
.allocation { order: 4; }

 @media only screen and (min-width: 768px){

     body{overflow:hidden;}	 
 *{
    margin:0;
     padding:0;
}
     .hero {
        display:none;
         background-image: url("../DAK_NV_CH_PN_Beauty_Outshinery.png");
         height: 100%;
         background-position: right;
         background-repeat: no-repeat;
         background-size: cover;
         margin: 0;
         width: 100%;
         position: absolute;
    }
     .articleClass {
         position: relative;
         padding-left: 25px;
         width: 85%;
         padding-right: 25px;
         background-image: none;
         text-align: center;
         margin: auto;
        /*  padding: 50px;
        float: left;
        */
    }

   #header {
    font-size: 16px;
    float: right;
    padding: 50px;
        padding-top: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        padding-left: 50px;
        padding-top: 50px;
    padding-top: 50px;
    padding-top: 10px;
    font-family: Garamond;
    text-transform: uppercase;
}

.mainBottom {
	padding-top: 0px;
     padding-left: 25px;
     width: 100%;
     padding-right: 25px;
     background-image: none;
     text-align:center;
     font-size:10px;
 }
    /* #header {
         font-size: 0.8em;
         float: right;
         padding: 50px;
         padding-top: 50px;
         padding-top: 10px;
    }*/
    /*#main-left {
         position: absolute;
         padding-left: 25px;
         width: 50%;
         padding-right: 25px;
         background-image: none;
         text-align: center;
    }
    */
     #main-left {
         position: relative;
         padding-left: 25px;
         width: 50%;
         padding-right: 25px;
         background-image: none;
         text-align: center;
         margin: auto;
          
         float:left;
    }
     .about {
        color:#B66F07;
         font-family: "hoefler_text_regular-webfont";
         text-transform: uppercase;
    }
     .links, .allocate {
        font-size:15px;
         font-family: "Garamond";
         text-transform:uppercase; letter-spacing: 5px;
    }
     .wrapper {	
         background-image: url("../DAK_NV_CH_PN_Beauty_Outshinery.png");
         height: 100%;
         background-position: center bottom;
         background-repeat: no-repeat;
         background-size: cover;
         margin: 0;
         width: 100%;
         position: absolute;
         overflow-wrap: hidden;
    }

 .allocate::before {
     content: "";
     display: block;
     margin: 0 auto;
     width: 65%;
     border-bottom: 1px solid black;
}
 .allocate:after {
     content: "";
     display: block;
     margin: 0 auto;
     width: 65%;
     border-bottom: 1px solid black;
}

#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    
    text-align: right;
}

#flex { display: flex; flex-direction: column; background-image:none;}
.image{ order: 1; }
.about { order: 2; }
.currentRelease { order: 4; }
.allocation { order: 3; }
.mainBottom {
    bottom: 0;
    position: absolute;
    width: 90%;
    text-align: right;
}
.mainBottom{
    font-family: Garamond;
    text-transform: uppercase;
}


}

HTML  
<head>
  <title>Winery
  </title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head> 
<div class="wrapper">
  <div id="header">
    <div>
      <p>Mailing List</p>
    </div>
  </div>

<div class="hero"> 	
</div>
  <div id="main-left">
    <article class="articleClass">
      
   <!--Flex Area-->
      <div id="flex">
        <div class="image">
          <img src ="DK_Logo.png"/>
        </div>
        <div class="about">
          <p>
            Chardonnay and Pinot Noir from cool, coastal vineyards located in the shadow of Chile’s Andes mountains.
          </p>
        </div>
        <div class="currentRelease"> 
          <p class="links">
            CURRENT RELEASE 
          </p>
          <p class="ital"> chardonnay &nbsp &nbsp &nbsp/ &nbsp &nbsp &nbsp pinot noir 
          </p>
          <p class="allocate">REQUEST AN ALLOCATION</p>
        </div>
        <div class="allocation"> 
           <p class="bottom">We invite you to explore Dakél Chardonnay and Pinot Noir from Chile’s Itata Valley - a winemaking passion project from the celebrated winemaking team of Andres Sanchez, 
          Randy Ullom, and Don Hartford. DAKÉL roughly 
          translates as “to woo” – which is exactly what this cool climate Chilean region did when the trio set out to find the best terroir for creating extraordinary, site-reflective Chardonnay and Pinot Noir in Chile. 
        </p>
        </div>
      </div>
      <!--End Flex Area-->
    
    </article>

   
 </div> 
<div class="mainBottom">
     
      <p>©DAKÉL Wines, SANTA ROSA, California  | PRIVACY / SHIPPING / TERMS</p>
  
  </div>
  </div>



</div>
</body>


Screenshot of what it should look like

It is going to be much easier to help you if you give us a link to the actual project.

gladly. thanks again.

http://restechsys.com/staging/portmoth.html

For broad screens, it’s not possible to achieve that exact layout. The image has an aspect ratio of 3:2, which is much closer to a square than the usual monitor (which is 16:9, 16:10 or even wider).

For my 16:9 monitor, if I wanted to take the image the full width of the browser window, this is what would be visible (note the black lines):

The bottles are fully visible, but there’s no space for a footer or menu at the top.

You can only reduce the page’s width (not make it full-width), which might look weird. But it’s easy for this image to make it wider with some image software like PhotoShop (in case you’re into design). Otherwise you need a different image.

Another issue you have is that no vertical scroll bar appears before the narrow view break point, so as I decrease the width/height of the browser the content starts to disappear off the bottom of the page but I can’t scroll to get it back.

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