CODEWITHSUNDEEP
htmlcssimagebackground-image
Jabir Al Fatah
Jabir Al Fatah

Reputation: 31

How can I avoid an image-repeating while setting it as a background for my website?

I want to set a prefereble image as the background for my website.

Now, an image file always comes with a fixed pixel or size. Lets say that my chosen image is 960x960 px. But my web page may have different size, may be the size is 3 times bigger than the image.

If I set that image as background, then normally it will repeat (I know how to stop it, but that's not what I want). When it gets repeated, it will make a stripe or a shadow type line at that point where they join with each other. That means, at the image joining point, it makes a separate border (I hope you know what I mean) what looks bad and an user doesn't like it.

How to avoid that?

How can I set a background image as only a single image so that it's not clearly visible that many images are joint on the background.

As an example this is my background image:

background-image:url(img/backgr.gif);

Upvotes: 0

Views: 1592

Answers (2)

Arif Burhan
Arif Burhan

Reputation: 505

After the background-image line have this line:

background-repeat: no-repeat;

Upvotes: 1

The Conspiracy
The Conspiracy

Reputation: 3953

Two possibilities:

  1. Use a graphic program to edit your image so it becomes seamless. Look here: http://www.youtube.com/watch?v=NARVupW2ads
  2. Use background-size:cover; to enlarge the background image so it automatically covers the whole screen.

Upvotes: 2

Related Questions