I’m trying to make my background image not skew while leaving the flex-container box skewed and was wondering if there was anyway i could do this
I tried making the .first selector as a child of the flex-item to unskew it but that didn’t work and now i’m stuck. Any help would be appreciated.
CSS
<code>body{
background-color: antiquewhite
}
.flex-container{
display: flex;
justify-content: center;
background: url(./images/woodbg.jpg);
background-size: 100% 100%;
gap: 10px;
height: 400px;
overflow: hidden;
}
.flex-item{
width: 400px;
border: 2px solid gray;
transform: skew(-10deg);
background-size: 100% 100%
}
.first{
background-image: url(./images/cocktail1.jpg);
}
.second{
background-image: url(./images/cocktail2.jpg);
}
.third{
min-width: 400px;
border: 0;
}
.fourth{
background-image: url(./images/marg1.jpg);
}
.fifth{
background-image: url(./images/marg2.jpg);
}
</code>
<code>body{
background-color: antiquewhite
}
.flex-container{
display: flex;
justify-content: center;
background: url(./images/woodbg.jpg);
background-size: 100% 100%;
gap: 10px;
height: 400px;
overflow: hidden;
}
.flex-item{
width: 400px;
border: 2px solid gray;
transform: skew(-10deg);
background-size: 100% 100%
}
.first{
background-image: url(./images/cocktail1.jpg);
}
.second{
background-image: url(./images/cocktail2.jpg);
}
.third{
min-width: 400px;
border: 0;
}
.fourth{
background-image: url(./images/marg1.jpg);
}
.fifth{
background-image: url(./images/marg2.jpg);
}
</code>
body{
background-color: antiquewhite
}
.flex-container{
display: flex;
justify-content: center;
background: url(./images/woodbg.jpg);
background-size: 100% 100%;
gap: 10px;
height: 400px;
overflow: hidden;
}
.flex-item{
width: 400px;
border: 2px solid gray;
transform: skew(-10deg);
background-size: 100% 100%
}
.first{
background-image: url(./images/cocktail1.jpg);
}
.second{
background-image: url(./images/cocktail2.jpg);
}
.third{
min-width: 400px;
border: 0;
}
.fourth{
background-image: url(./images/marg1.jpg);
}
.fifth{
background-image: url(./images/marg2.jpg);
}
HTML
<code><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drink Maker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">
<div class="first"></div>
</div>
<div class="flex-item second"></div>
<div class="flex-item third"></div>
<div class="flex-item fourth"></div>
<div class="flex-item fifth"></div>
</div>
</body>
</code>
<code><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drink Maker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">
<div class="first"></div>
</div>
<div class="flex-item second"></div>
<div class="flex-item third"></div>
<div class="flex-item fourth"></div>
<div class="flex-item fifth"></div>
</div>
</body>
</code>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drink Maker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">
<div class="first"></div>
</div>
<div class="flex-item second"></div>
<div class="flex-item third"></div>
<div class="flex-item fourth"></div>
<div class="flex-item fifth"></div>
</div>
</body>
New contributor
Godwin Olekanma is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.