Rotate background image without rotating background-color

HTML & CSS
,
21

Hi there Sora_Keyheart,

here is the code for background-image re-positioned without animation…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Geometric shape</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background: #f0f0f0;
 }
#geometric-shape {
    position: relative;
    overflow: hidden;
    width: 40vw;
    height: 30vw;
    margin: auto;
    border: 1px solid #000;
    background: linear-gradient(to bottom,#fff,#bbb);
    box-shadow: 0.4em 0.4em 0.4em #999;
 }
#geometric-shape::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-image: url(http://i.imgur.com/dTHLJ8B.png);
    background-size: 100% auto;
    transform: rotate(90deg) translate(12.5%,-22%);
 }

@media screen and (max-width:50em) {
#geometric-shape {
    width: 60vw;
    height: 45vw;
  }
 }
@media screen and (max-width:30em) {
#geometric-shape {
    width: 80vw;
    height: 60vw;
  }
 }
@media screen and (max-width:20em) {
#geometric-shape {
    width: 92vw;
    height: 69vw;
  }
 }
</style>

</head>
<body> 

<div id="geometric-shape"></div>


</body>
</html>

coothead

2 Likes
22

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