CODEWITHSUNDEEP
csspng
ledzee
ledzee

Reputation: 303

How to add a repeating png image in the background of a webpage using CSS?

I am using the following CSS code:

body  
{
    background-image: url(img/tasky_pattern.png);  
}

My image address is downloads/dist/image/tasky_pattern.png. I have no idea where I am going wrong and how to correct this.

Thanks.

Upvotes: 2

Views: 158

Answers (3)

user4284772
user4284772

Reputation:

the css background default behavior is repeating itself...

you can specify exis

background: url('image_path'); /* it repeats itself */
// or //
background: url('image_path') repeat-x ; /* it repeats only x-exis */
// or //
background: url('image_path') repeat-y ; /* it repeats only y-exis */
// or //
background: url('image_path') no-repeat; /* no repeats */

SEE DEMO

Upvotes: 0

ocajian
ocajian

Reputation: 687

The image you are link to img/tasky_pattern.png is under a folder called downloads/dist/image/tasky_pattern.png but you used img instead of image

Have a look at fixing that typo. This is probably why your image is not showing.

To check your file references open your page in chrome and inspect element. Find the css code that says background-image: url(img/tasky_pattern.png); and then navigate to the destination. This will give you the full url in your browser address bar and will show you where you went wrong with your path name

Upvotes: 0

Kevin
Kevin

Reputation: 862

You need to make sure your image exists in your folder, so upload your image to the ./img/ folder. Then you could use the following CSS code:

body
{
    background-image: url("img/tasky_pattern.png") repeat;
}

If you cannot upload the image to your ./img/ folder, you can upload the image to a free file hosting website and use the link they provide instead.

Upvotes: 1

Related Questions