Background image doesn't appear while writing in css

Question

StackOverflow. I got problem, when I'm trying to put background image it doesn't appear

Here's the code

body {
    background-image: url(https://i.pinimg.com/originals/90/db/f4/90dbf402730c059e0f106ce80d1d779a.jpg);
}

Check you browser console to see if you have a 404 error for the image. — Sfili_81, Mar 31 '22 at 07:44
or probably your image is to big and you can't see the tree in the right corner — Sfili_81, Mar 31 '22 at 07:46
Other CSS could overwrite your background image ([see CSS Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)). Use the browser's developer tools - you can see the CSS rules applied there. — Peter Krebs, Mar 31 '22 at 07:50

score 1 · Accepted Answer · answered Mar 31 '22 at 07:49

1

Can you please add

body {
  background-image: url(https://i.pinimg.com/originals/90/db/f4/90dbf402730c059e0f106ce80d1d779a.jpg);
  background-position: 100% 100%;
  background-size: cover;
}

For background position

https://css-tricks.com/almanac/properties/b/background-position/

For background size

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

answered Mar 31 '22 at 07:49

UPinar

1,067
1
2
16

yep, that works! Thank you. What was the problem not appearing the image? – chiponchez Mar 31 '22 at 07:57
Can you please check the size of your image. Probably it is so big. I prefer that using an image editor for creating an image size that you want. Because website speed is important and when you add bigger image its size get bigger too. @chiponchez – UPinar Mar 31 '22 at 07:58
I checked the image size it is 2560x1600 way too big for viewport @chiponchez – UPinar Mar 31 '22 at 08:02
And I just need to put smaller picture, am i right? – chiponchez Mar 31 '22 at 08:08
picture that the size of you need will work :) @chiponchez – UPinar Mar 31 '22 at 08:10
But why this image didn't appear? – chiponchez Mar 31 '22 at 08:11
because your viewport(screen) is 1920x1080 and image is 2560x1600 so when you try to put that image inside it will not show up. Then you say with `background-position: 100% 100%;` go and make my image height and width 100% which in here 100%'s are 100vh[viewport-height] and 100vw[viewport-width] @chiponchez – UPinar Mar 31 '22 at 08:15

score 0 · Answer 2 · answered Mar 31 '22 at 07:50

I can display the image on the background with the following code (you can change the 100% to another value in order to rescale the image):

body {
    background: no-repeat center/100% url(https://i.pinimg.com/originals/90/db/f4/90dbf402730c059e0f106ce80d1d779a.jpg);
}

Background image doesn't appear while writing in css

2 Answers2