How to Shift a Background Image with CSS

How to shift a background image with css

You can use the background-position:

background-position: 8px 8px;

More on that: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Move body background image

You need to use background-position instead.

body {
  background: url('picture.png') no-repeat; 
  background-position: 0 20px;
  background-size: contain;
}

Push background position off screen to the left

You can change the reference and use right 100vw

body {  margin:0;  height:100vh;  background:    url(https://picsum.photos/id/1/200/200) right 99vw bottom 0 no-repeat;}

Offset a background image from the right using CSS

I found this CSS3 feature helpful:

/* to position the element 10px from the right */
background-position: right 10px top;

As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.

See Can I use for details on the supported browsers.

Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/

Update:

This feature is now supported in all major browsers, including mobile browsers.

Parallax css background image move a little

Maybe this link will help it uses Javascript to move the background image

EDIT

I just realized this only works because the background image is a repeating pattern. If you want to do this effect with a normal image you can use Parallax.js.

moving text while keeping background-image in CSS

Use a negative top margin.

.menu_main ul {margin-top:-50px;}

Encounter issue with shifting form on a background image

Do not use img tag for background image, the container/div in which you want to have a background, put the CSS property background-image: url(../img/gym.jpg); in the stylesheet.
An image tag in HTML creates an additional element and to keep the other elements on its top, you will have to do additional styling by making it absolute.
The correct way to have image background set it in CSS.
Only change it and remove image tag from HTML.

.top-left {
  background-image:url(../img/gym.jpg);
}

animate background-position to continuously move horizontally

You can use background position to translate it through the image background like the example..

.chat {  width: 490px;  float: left;  background: #F2F5F8;  color: #434651;  position:absolute;  overflow:hidden;}@keyframes animatedBackground { 0% {  background-position: 0% 0% } 50% {  background-position: 0% 100% } 100% {  background-position: 0% 0% }}.chat .chat-header {  /* padding: 20px; */  border-bottom: 2px solid white;  background-image: linear-gradient(180deg, #FF5572, blue, #FF5572);  width:1000px; /*make bigger in order to move */  overflow:hidden;  background-position: 0px 0px;  background-repeat: repeat-x;  animation: animatedBackground 4s linear infinite;  margin:0;  height:400px;  background-size: 100% 400%;}

<div class="chat">   <div class="chat-header clearfix">       <div class="chat-about">       hi       </div>   </div> </div>

---

Related Topics