CODEWITHSUNDEEP
javascriptcssjspstyles
John
John

Reputation: 2141

background image with horizontal scrolling

I have a background image in bottom right of the page.

when i compress the browser width, the background image is cropped at the left side. Means i can't browse the background image with the horizontal scroll bar.

I have below background properties.

background-image:url('Image.png'); background-size: 564px 282px; background-attachment: fixed; background-position: bottom right; background-repeat: no-repeat;

Please let me know, what im missing here. Thanks in advance

Upvotes: 2

Views: 3848

Answers (2)

user2678106
user2678106

Reputation:

try css3 animation?

@-webkit-keyframes move{
from {background-position: bottom right;}
to {background-position: bottom left;}
}

div{
-webkit-animation:move 5s;
}

http://www.w3schools.com/css3/css3_animations.asp

and also paste your current code here

Upvotes: 1

Nitesh
Nitesh

Reputation: 15749

No horizontal scrolling for images:

You need to add background-size css attribute to either contain, fit or 100%. This will make your image to appear without horizontal scrolling.

For horizontal scrolling for images:

If you want scrolling, then you have to give a min-width and that width should be same as the background image width.

Upvotes: 2

Related Questions