Move background image to the left?

Right now I have this background for my page:

body {
    margin: 0;
    padding: 0;
    background-color: #fff; 
    background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #c8cecf 81px, transparent 81px),
    linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;
  }
 

It just makes the style of a “notepad”.

Now the problem is i´m doing a media querie for mobile and I want this blue line to “dissapear”:

Is there any way to “move” the background image to the left so only the right notepad style will appear, and the line won´t appear?

Cool idea to recreate actual notepad look. You could just remove the vertical line gradient from the body in the media query like so:

@media (max-width: 1000px) {
  body {
    background-image: linear-gradient(#eee .1em, transparent .1em);
  }
}

Of course if you want it animated you’ll have to do something else. Maybe something like this:

@media (max-width: 1000px) {
  body {
    background-position: left -81px top 0;
    transition: background-position 200ms ease-in-out;
  }
}

Unfortunately this isn’t a very performant way, as you can tell by laggy animation. Smoothest way to move things is by using transform property, but that doesn’t work for background images I think. One workaround I can think of is by adding another absolute-positioned element, or using a pseudo-element, and putting that vertical line gradient on it. Then you can use transform: translate on it to move it to the left in the media query. Edit: here you go: https://codepen.io/ArtemPetrov/pen/MMEENw
A little faster? Hard to say.

1 Like

What about playing with z indexes of the notepad elements?

1 Like

Nice, pretty neat :wink: