CSS and pictures

[Joveice]

So this is how the picture is on the website

What do I need to do to be able to display a part of the image on the screen and have the rest just wanish on the outside (I have it to scroll like a foto gallary)

Here is the CSS code I got

	#bg {
		-moz-animation: bg 60s linear infinite;
		-webkit-animation: bg 60s linear infinite;
		-ms-animation: bg 60s linear infinite;
		animation: bg 60s linear infinite;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	/* Set your background with this */

		background: #fff400 url("images/2.png") bottom left;
		background-repeat: repeat-x;
		height: 100%;
		left: 0;
		opacity: 1;
		position: fixed;
		top: 0;
	}

	@-moz-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@-webkit-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@-ms-keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	@keyframes bg {
		0% {
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
		}

		100% {
			-moz-transform: translate3d(-2250px,0,0);
			-webkit-transform: translate3d(-2250px,0,0);
			-ms-transform: translate3d(-2250px,0,0);
			transform: translate3d(-2250px,0,0);
		}
	}

	#bg {
		background-size: 2250px auto;
		width: 6750px;
	}

 

[Adalhelm]

Can you find a website that does this so I have a better visual example of what you are wanting?

[Joveice]

9 minutes ago, Adalhelm said:

Can you find a website that does this so I have a better visual example of what you are wanting?

https://html5up.net/uploads/demos/aerial/

This has a picture that fits perfectly to the bottom, but there I would like one thats longer and then still the same hight as normal

[Adalhelm]

Is the CSS you gave the same CSS from the demo page?

4 minutes ago, Joveice said:

https://html5up.net/uploads/demos/aerial/

This has a picture that fits perfectly to the bottom, but there I would like one thats longer and then still the same hight as normal

 

[Joveice]

Just now, Adalhelm said:

Is the CSS you gave the same CSS from the demo page?

 

Yes

[Joveice]

3 minutes ago, Joveice said:

Yes

You could ofc download it here https://html5up.net/aerial and view all the files that comes with it

[Adalhelm]

1 minute ago, Joveice said:

You could ofc download it here https://html5up.net/aerial and view all the files that comes with it

I would do this