CODEWITHSUNDEEP
htmlcssimagebackground-image
InvalidSyntax
InvalidSyntax

Reputation: 9495

Full page background image with pattern overlay

I would like to display an background image (background.jpg) that covers the whole page, but alongside this image I would like a dotted overlay (dotted-pattern.jpg). I have attempted the following code which theoretically should work but it doesn't, background.jpg only shows the image in correct proportions.

Here is the code:

background-image: url(images/dotted-pattern.png), url(images/background.jpg);
background-position: top left, center center;
background-repeat: repeat, no-repeat;
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;

Upvotes: 0

Views: 1146

Answers (1)

Kate McCubbins
Kate McCubbins

Reputation: 803

You have a background-position property that includes a background-attachment value where it says "center center fixed". This should just say "center center", and you need an additional property for background-attachment.

Upvotes: 3

Related Questions