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?
@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.
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
@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.
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.
That is because it’s not the real url of the image. If you click in it, it will redirect to a facebook post.
@paulsonstech oh ok thank you so much, can’t believe I missed that. Would you mind if I ask one more question?
@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.
Just add background-size: cover;
Use background-size: 100% auto;
That will not cover the entire page.
I know but his image looks better with this, cover
makes it too much stretched vertically .
I tried both but @paulsonstech works best for me. Thanks @mdshariq for sharing your suggestion , I appreciate it.
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.
@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.
yes, it is true. you do not need the image link