Rotate background image without rotating background-color

Hi there Sora_Keyheart,

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

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

<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(;
    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;


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




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