CODEWITHSUNDEEP
css
Irfan Mir
Irfan Mir

Reputation: 2175

white-space after/before background image repeat

I am using background-repeat:repeat-x; to repeat a background image horizontally, but I noticed that there is a white space after the earlier image and before the next image.

How can I get rid of this white-space?

Here is the page where this is happening: https://dl.dropboxusercontent.com/u/270523/help/search/new.html

One may have to make the browser window wider to see the landscape background image repeat.

Upvotes: 1

Views: 1323

Answers (2)

Connor
Connor

Reputation: 1034

Using the Chome Developer Tool, you can see that your SVG file is one pixel larger than the PNG version. The SVG is also layered higher and (because of the size difference) is scaling differently than the PNG. Try cropping the image or switching the order of the layers -

From

background: url(dawn.png) top left repeat-x;
background: url(dawn.svg) top left repeat-x;

To:

background: url(dawn.svg) top left repeat-x;
background: url(dawn.png) top left repeat-x;

Upvotes: 0

bookcasey
bookcasey

Reputation: 40443

A little transparency on each side is in the image file. Crop the image.

Upvotes: 4

Related Questions