Search
Get Started
KP-C
Kevin Powell - Community
•
2y ago
admin.o7
Image Not Working
The image is not working
, even tho the path is correct
.
Kevin Powell - Community
Join
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,373
Members
View on Discord
Was this page helpful?
Yes
No
A
admin.o7
OP
•
3/31/24, 4:39 PM
A
admin.o7
OP
•
3/31/24, 4:39 PM
Ἔ
ἔρως
•
3/31/24, 4:41 PM
where can we see this running
?
Ἔ
ἔρως
where can we see this running?
A
admin.o7
OP
•
3/31/24, 4:41 PM
do you want a pen
?
Ἔ
ἔρως
•
3/31/24, 4:41 PM
or something
J
Jochem
•
3/31/24, 4:44 PM
Are you getting a 404
?
J
Jochem
Are you getting a 404?
A
admin.o7
OP
•
3/31/24, 4:44 PM
no
, no errors in the console
A
admin.o7
OP
•
3/31/24, 4:44 PM
https://codepen.io/Vetlix-the-builder/pen/JjVOGRX
Ἔ
ἔρως
•
3/31/24, 4:47 PM
that
'll never work on codepen
Ἔ
ἔρως
•
3/31/24, 4:48 PM
unless you upload the files
Ἔ
ἔρως
•
3/31/24, 4:48 PM
https://blog.codepen.io/documentation/asset-hosting/
Ἔ
ἔρως
that'll never work on codepen
A
admin.o7
OP
•
3/31/24, 4:49 PM
yeah i forgot
A
admin.o7
OP
•
3/31/24, 4:49 PM
let me just upload it by url
Ἔ
ἔρως
•
3/31/24, 4:49 PM
can you access the file manually
, from the browser
?
Ἔ
ἔρως
can you access the file manually, from the browser?
A
admin.o7
OP
•
3/31/24, 4:50 PM
yes
A
admin.o7
OP
•
3/31/24, 4:50 PM
it
's on the public folder
A
admin.o7
OP
•
3/31/24, 4:50 PM
i have updated the pen
Ἔ
ἔρως
•
3/31/24, 4:52 PM
you
're not going to make it work with unsplashed
Ἔ
ἔρως
•
3/31/24, 4:52 PM
https://unsplash.com/photos/white-mattress-beside-sectional-sofa-emqnSQwQQDo
<
-
- this is just an html document
J
Jochem
•
3/31/24, 4:53 PM
you can
, but you need to link the actual PNG
J
Jochem
•
3/31/24, 4:53 PM
also
, your demo div has zero height
Ἔ
ἔρως
•
3/31/24, 4:53 PM
it
's a temporary file
M
Mannix
•
3/31/24, 4:53 PM
does your div has any content
?
J
Jochem
•
3/31/24, 4:53 PM
ah
Ἔ
ἔρως
•
3/31/24, 4:53 PM
and the body had 0 height
J
Jochem
•
3/31/24, 4:53 PM
picsum
.photos then
Ἔ
ἔρως
•
3/31/24, 4:53 PM
yup
, or placekitty
Ἔ
ἔρως
•
3/31/24, 4:53 PM
or placehold
.it
M
Mannix
•
3/31/24, 4:53 PM
you either need content in that div or give it a height
Ἔ
ἔρως
•
3/31/24, 4:54 PM
that wont work
J
Jochem
•
3/31/24, 4:55 PM
still lamenting the death of fillmurray
.com
Ἔ
ἔρως
•
3/31/24, 4:55 PM
Ἔ
ἔρως
•
3/31/24, 4:55 PM
oh
, wait
Ἔ
ἔρως
•
3/31/24, 4:55 PM
how the hell is it working with height 0
?
A
admin.o7
OP
•
3/31/24, 4:56 PM
i don
't know
M
Mannix
•
3/31/24, 4:56 PM
the content gives the height
M
Mannix
•
3/31/24, 4:56 PM
the ttttt
A
admin.o7
OP
•
3/31/24, 4:56 PM
even with height 100
% it wont work
M
Mannix
•
3/31/24, 4:56 PM
100
% of 0 is 0
Ἔ
ἔρως
•
3/31/24, 4:56 PM
Ἔ
ἔρως
•
3/31/24, 4:57 PM
it
's working
M
Mannix
•
3/31/24, 4:57 PM
you need to use actual unit
Ἔ
ἔρως
Click to see attachment
A
admin.o7
OP
•
3/31/24, 4:57 PM
how
Ἔ
ἔρως
•
3/31/24, 4:57 PM
i just added content
M
Mannix
•
3/31/24, 4:57 PM
or
A
admin.o7
how
J
Jochem
•
3/31/24, 4:58 PM
divs don
't have an intrinsic height
, and background images don
't change the height of their element
Ἔ
ἔρως
•
3/31/24, 4:58 PM
i would use a min
-height
: 100dvh
M
Mannix
or `html,body{height: 100%;} .bg-image{height: 100%;}`
A
admin.o7
OP
•
3/31/24, 4:58 PM
thats what i did
?
J
Jochem
•
3/31/24, 4:58 PM
your empty div collapses to zero pixels high
, so you can
't see the background image at all
M
Mannix
•
3/31/24, 4:58 PM
you have height
: 0 in your pen
Next page
App.tsx
App.tsx
GlassWindow.tsx
GlassWindow.tsx
html,body{height: 100%;} .bg-image{height: 100%;}
html,body{height: 100%;} .bg-image{height: 100%;}