Flex grid <img> and background-image side by side responsiveness/scaling issue - html

Question

Here's my issue:
I am trying to create a side-by-side ad where the left side is just an image, and the right side is a background image with an image, text, and 5 responsive flexgrid buttons nested on top of it.
I figured out how to get everything layered on top of the background image, but right now I cannot for the life of me figure out how to get the background image container to scale with the image to its left. I have been tweaking percentages and margins for hours now trying to figure it out.
I managed to get it extremely close on a certain screen size (2560x1440) but as the window is resized the background image container ends up resizing differently than the image. One solution I thought of is just creating like 10 media query breakpoints where I tweak the margins and paddings to make the images the same size, but honestly, I'd rather find a more efficient and cleaner way to do it.
Please don't judge my code, it's incredibly messy I know! I am still learning.
https://jsfiddle.net/y8nz39gL/3/
DESIRED RESULT
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
background-image: url('https://cdn.shopify.com/s/files/1/1017/0995/files/Luckyleo-Custom-Print-Floral-Background.jpg?13173226259512623367');
background-position: 50 50;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 50px 0px 50px 0px;
}
.flex-container2 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -100px;
}
/* NEW */
.flexbottommargin {
margin-bottom: -50px;
}
.less-space-bottom {
margin-bottom: -20px !important;
}
/*NEW OVER*/
.flex-container20 {
padding-top: 35px;
padding-bottom: 35px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -75px;
}
.flex-container21 {
padding-top: 35px;
padding-bottom: 35px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -75px;
}
.flex-container22 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -100px;
margin-top: -2px;
}
.flex-container23 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -100px;
margin-top: -2px;
}
.flex-container-content2 img {
padding-bottom: 15px;
}
.luckyleospacer {
padding-bottom: 20px;
}
.extrabottompadding {
padding-bottom: 12px;
}
.extrabottompadding2 {
padding-bottom: 20px;
}
/* NEW */
.flex-container-content-newyears {
padding-top: 20px;
width: 71%;
/*NEW LINE*/
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 20px;
text-align: center;
}
.flex-container-content-newyears-banner {
padding-top: 20px;
width: 64%;
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 20px;
text-align: center;
}
/*NEW OVER*/
.flex-container-content {
padding-top: 35px;
width: 60%;
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 10px;
}
.flex-container-content2 {
padding-top: 35px;
width: 75%;
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 35px;
text-align: center;
}
.flex-container-content22 {
padding-top: 35px;
width: 100%;
align-items: center;
align-self: center;
justify-content: center;
}
.flex-container-content23 {
width: 100%;
align-items: center;
align-self: center;
justify-content: center;
}
.flex-container-content23 {
padding-top: 35px;
width: 100%;
align-items: center;
align-self: center;
justify-content: center;
}
.flex-container-content24 {
width: 100%;
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 55px;
text-align: center;
}
.flex-container-content h1 {
font-family: "Asap", sans-serif;
font-size: 2.4vw;
color: #292929 !important;
text-transform: none !important;
font-weight: 600;
line-height: 1.3em;
letter-spacing: 0px;
padding: 4%;
}
.flexgrid-cell {
margin-bottom: 0px;
}
.flex-container-content h2 {
font-family: "Lavanderia", sans-serif !important;
font-size: 4vw;
color: #292929 !important;
text-transform: none !important;
font-weight: 400;
line-height: 1.4em;
margin-bottom: 35px;
letter-spacing: 0px;
}
.flex-container-content2 h1 {
font-family: "Lavanderia", serif !important;
font-size: 50px;
font-size: 3.5vw;
color: #292929 !important;
text-transform: none !important;
font-weight: 500;
line-height: 1.3em;
letter-spacing: 0px;
}
.flex-container-content2 p {
padding-top: 20px;
color: #292929 !important;
text-transform: none !important;
padding-bottom: 20px;
}
.flex-container {
max-width: 100%;
margin: auto;
//border: 1px solid red;
}
/*Basic flexgrid Styles*/
.flexgrid {
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
.u-textCenter {
text-align: center;
align-items: center;
align-self: center;
justify-content: center;
}
.flexgrid-cell {
width: 100%;
flex: 1;
}
.flexgrid-cell img {
width: 100%;
}
/* Justify per row*/
.flexgrid--right {
justify-content: flex-end;
}
.flexgrid--center {
justify-content: center;
}
/* Alignment per row */
.flexgrid--top {
align-items: flex-start;
}
.flexgrid--bottom {
align-items: flex-end;
}
.flexgrid--center {
align-items: center;
}
/* Alignment per cell */
.flexgrid-cell--top {
align-self: flex-start;
}
.flexgrid-cell--bottom {
align-self: flex-end;
}
.flexgrid-cell--center {
align-self: center;
}
/*===========================================*/
/* Base classes for all media - Mobile first */
.flexgrid--cols-2 > .flexgrid-cell {
flex: 0 0 100%;
}
.flexgrid--cols-3 > .flexgrid-cell {
flex: 0 0 100%;
}
.flexgrid--cols-4 > .flexgrid-cell {
flex: 0 0 100%;
}
.flexgrid--cols-6 > .flexgrid-cell {
flex: 0 0 calc(50% - #{$gutter});
}
.flexgrid--cols-12 > .flexgrid-cell {
flex: 0 0 calc(33.3333% - #{$gutter});
}
/* One of -- columns*/
.flexgrid--1of2 > .flexgrid-cell,
.flexgrid--1of4 > .flexgrid-cell:first-of-type,
.flexgrid--1of3 > .flexgrid-cell:first-of-type {
flex: 0 0 100%;
}
.flexgrid--1of6 > .flexgrid-cell:first-of-type {
flex: 0 0 50%;
}
.flexgrid--fit > .flexgrid-cell {
flex: 1;
}
.flexgrid--full > .flexgrid-cell {
flex: 0 0 100%;
}
/* Tablet (medium) screens */
#media (min-width: 30em) {
.flexgrid--cols-4 > .flexgrid-cell {
flex: 0 0 calc(50% - #{$gutter});
}
.flexgrid--cols-6 > .flexgrid-cell {
flex: 0 0 calc(33.3333% - #{$gutter});
}
.flexgrid--cols-12 > .flexgrid-cell {
flex: 0 0 calc(16.6666% - #{$gutter});
}
.flexgrid--holly-grail {
.aside {
flex: 1 calc(25% - #{$gutter});
}
}
.flexgrid--1of2 > .flexgrid-cell {
flex: 0 0 50%;
}
.flexgrid--1of6 > .flexgrid-cell:first-of-type {
flex: 0 0 30%;
}
.flexgrid--1of4 > .flexgrid-cell:first-of-type {
flex: 0 0 50%;
}
.flexgrid--1of3 > .flexgrid-cell:first-of-type {
flex: 0 0 100%;
}
}
/* Large screens */
#media (min-width: 48em) {
.flexgrid--cols-2 > .flexgrid-cell,
.flexgrid--cols-3 > .flexgrid-cell,
.flexgrid--cols-4 > .flexgrid-cell,
.flexgrid--cols-6 > .flexgrid-cell,
.flexgrid--cols-12 > .flexgrid-cell {
flex: 1;
}
.flexgrid--1of2 > .flexgrid-cell {
flex: 0 0 50%;
}
.flexgrid--1of6 > .flexgrid-cell:first-of-type {
flex: 0 0 16.6666%;
}
.flexgrid--1of4 > .flexgrid-cell:first-of-type {
flex: 0 0 25%;
}
.flexgrid--1of3 > .flexgrid-cell:first-of-type {
flex: 0 0 30%;
}
.flexgrid--gutters.flexgrid--nested {
.flexgrid-cell:first-of-type {
.Demo {
margin-right: 0;
}
}
}
}
/* 2/3rds COLUMN SPLIT */
/* NEW */
.flexgrid--half-l {
flex-basis: 49.1%;
max-width: 49.1%;
margin-right: .6%;
}
.flexgrid--half-r {
flex-basis: 50%;
max-width: 50%;
margin-left: .4%;
}
.flexgrid--1of3 {
flex-basis: 57.188%;
max-width: 57.188;
}
.desktopshowtop {
padding-top: 57px;
}
.desktopshowtopbanner {
padding-top: 57px;
}
/* NEW */
#media only screen and (min-width: 300px) and (max-width: 1024px) {
.flex-container-content h2 {
font-size: 12vw;
}
.flex-container-content h1 {
font-size: 4.2vw;
}
.flex-container-content2 h1,
h2 {
font-size: 40px;
font-size: 6.8vw;
}
}
#media only screen and (min-width: 300px) and (max-width: 419px) {
.flex-container-content2 h1,
h2 {
font-size: 40px;
font-size: 8vw;
}
}
#media only screen and (min-width: 300px) and (max-width: 1267px) {
.whyispaddinghere {
margin-bottom: -115px;
}
.flex-container-content {
width: 90%;
}
.flex-container-content2 {
width: 95%;
}
}
#media only screen and (min-width: 1025px) {
.flex-container21 {
display: none;
}
.flex-container23 {
display: none;
}
}
#media only screen and (min-width: 300px) and (max-width: 1024px) {
.flex-container20 {
display: none;
}
.flex-container22 {
display: none;
}
}
/* NEW LINES - 2018 */
/* With gutters*/
$gutter: 1em;
.flexgrid--gutters {
margin-left: -$gutter;
.flexgrid-cell {
padding-left: $gutter;
}
.flexgrid--nested {
.flexgrid-cell:first-of-type {
margin-right: 1em;
}
}
}
}
.flex-container-content-newyears {
padding-top: 20px;
width: 75%;
/*NEW LINE*/
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 20px;
text-align: center;
}
.flex-container-newyears {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
}
.content-1of5:hover {
background-color: #a36871;
}
.content-1of5 {
background-color: #8d5760;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: "Asap", sans-serif;
align-self: center;
justify-content: center;
align-items: center;
padding-top: 6px;
padding-bottom: 6px;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 7px;
color: #fff;
}
.content-1of5 a {
color: #fff !important;
}
.express-promo-right-side {
background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSizebg.jpg?4927879912789524270");
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin: auto;
}
.express-promo-right-side img {
padding-top: 5.4%;
margin-top: 12px;
max-width: 40% !important;
margin-bottom: -5%;
}
.express-buttons-margin-top {
padding: 14.0% 2% 4.0% 2%;
margin-bottom: -9px;
}
.flexgrid--half-r {
margin-bottom: 1%;
margin-top: 1%;
}
.shopsizefrontpage {
padding-top: 10%;
margin-bottom: -10%;
font-size: 5vw !important;
line-height: 1.0em;
font-family: 'Poppins';
color: #fff !important;
font-weight: 800;
}
.shopsizefrontpagered {
color: #8d5760 !important;
}
.Grid--nested {
.Grid-cell:first-of-type {
.Demo {
margin-right: 1em;
}
}
}
}
\
<div class="flex-container-newyears">
<div class="flex-container-content-newyears">
<div class="flexgrid flexgrid--gutters flexgrid--cols-3 u-textCenter">
<div class="flexgrid--half-l flexgrid-cell">
<img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize.jpg?4927879912789524270" alt="Luckyleo How to Customize - Step 1" />
</div>
<div class="flexgrid--half-r flexgrid-cell express-promo-right-side"><img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize2-logo.png?5263606338478632237" />
<div class="flexgrid-cell shopsizefrontpage">SHOP <span class="shopsizefrontpagered"> YOUR SIZE</span></div>
<div class="flexgrid flexgrid--gutters flexgrid--cols-4 u-textCenter express-buttons-margin-top">
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Rather than trying to sync behavior of a background-image with an <img>, just use a background-image over the entire element and control the proportion specifying height or min-height at different widths.
Here's a starter. As a side note, I find your markup way too complex for the desired outcome, so I simplified it a bit.
body {
background-color: #f5f5f5;
margin: 0;
font-family: sans-serif;
}
.newyears {
background: url(https://i.stack.imgur.com/oK65C.jpg) no-repeat 50% 50% /cover;
display: flex;
justify-content: flex-end;
min-height: 30vw;
}
.nys-content {
flex: 0 0 50%;
display: flex;
padding: 3rem 0;
flex-direction: column;
align-items: center;
justify-content: center;
border-left: 10px solid white;
}
.nys-content img {
width: 150px;
margin-bottom: 1.5rem;
}
.nys-links {
display: flex;
align-items: center;
justify-content: center;
}
.nys-links a {
background-color: #900;
color: white;
text-decoration: none;
margin: 3px;
padding: .75rem;
flex: 1 .1 20%;
text-align: center;
}
#media (max-width: 768px) {
.nys-links, .nys-links a {
width: 60%;
}
.nys-links {
flex-direction: column;
}
}
#media (max-width: 540px) {
.nys-content {
flex: 1 0 auto;
border-left: none;
}
}
<div class="newyears">
<div class="nys-content">
<img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize2-logo.png?5263606338478632237">
<div class="nys-links">
XXS
XXS
XXS
XXS
XXS
</div>
</div>
</div>
If you prefer jsFiddle, here it is.
Note: This answer does not attempt to sync scaling of background-image with an <img> tag. It's based on comments below the question on how I'd tackle this task. Syncing the two above can be achieved using transforms. Here's an example of how to achieve it.