My img background keeps repeating the same image

Guys please help, my img background keeps repeating the same image multiple times. I tried the “background-repeat: no-repeat;” but my img background disappears. What to do?

1 Like

Hello @DavidLacsao. Can you please provide a link to your pen? Thanks!

1 Like

@paulsonstech I actually didn’t do it on codepen, I did it on atom. Weird stuff happens when I copy paste it on codepen. I think i’ll just copy paste it in codepen so you can tell me the problem but the result is different from mine locally . Don’t know why.

1 Like

https://codepen.io/david-lacsao/pen/BazrRPr?editors=1100 The middle shouldn’t look like that. I removed the no-repeat because my background disappears

1 Like

Hi @DavidLacsao. Can you please provide the link for the background image? Thanks!

1 Like

@paulsonstech here https://www.google.com.ph/url?sa=i&url=https%3A%2F%2Fwww.facebook.com%2FedX%2Fposts%2Fget-familiar-with-using-computer-science-as-a-tool-to-solve-real-world-analytica%2F1582150668582956%2F&psig=AOvVaw1PpYP1i4nAHKVUPHDWEdlh&ust=1604109352001000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKDC7LKG3OwCFQAAAAAdAAAAABAK I copied link address. Should it really look this long? lol.

1 Like

No need of the image link. The problem was just a typo. You were missing a semicolon ; after the background-image property:

background-image: (image) // <-- no ;! 

Change it to:

background-image: (image); 
background-repeat: no-repeat;

If you don’t add semicolon and add another property, the background image property is ignored. That’s why it disappeared.

1 Like

That is because it’s not the real url of the image. If you click in it, it will redirect to a facebook post.

1 Like

@paulsonstech oh ok thank you so much, can’t believe I missed that. Would you mind if I ask one more question?

1 Like

@paulsonstech I already added the semicolon and added the “no-repeat” in the background-repeat. The background only shows one image on the top left but I want it to be the whole background. Please help me how to make the image the whole background, thanks.

1 Like

Just add background-size: cover;

Use background-size: 100% auto;

2 Likes

That will not cover the entire page.

1 Like

I know but his image looks better with this, cover makes it too much stretched vertically .

1 Like

I tried both but @paulsonstech works best for me. Thanks @mdshariq for sharing your suggestion , I appreciate it.

1 Like

Hey @DavidLacsao. You can use @mdshariq’s answer if that makes the image better. For making it fit the entire page, you can use background-attachment: fixed; below @mdshariq’s answer.

1 Like

@paulsonstech oh okay2 I’ll try it. Thank you so much for your help. I think that’s all the help I need for today. Thanks again guys.

1 Like

Yes i forgot to select background-attachment: fixed; while copying :smile: thanks @paulsonstech

1 Like

yes, it is true. you do not need the image link

1 Like