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      /       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

