Image Not Working
The image is not working, even tho the path is correct.
144 Replies
App.tsx
GlassWindow.tsx
where can we see this running?
do you want a pen?
or something
Are you getting a 404?
no, no errors in the console
https://codepen.io/Vetlix-the-builder/pen/JjVOGRX
that'll never work on codepen
unless you upload the files
https://blog.codepen.io/documentation/asset-hosting/
yeah i forgot
let me just upload it by url
can you access the file manually, from the browser?
yes
it's on the public folder
i have updated the pen
you're not going to make it work with unsplashed
https://unsplash.com/photos/white-mattress-beside-sectional-sofa-emqnSQwQQDo <-- this is just an html document
you can, but you need to link the actual PNG
also, your demo div has zero height
it's a temporary file
does your div has any content?
ah
and the body had 0 height
picsum.photos then 🙂
yup, or placekitty
or placehold.it
you either need content in that div or give it a height
that wont work
still lamenting the death of fillmurray.com
oh, wait
how the hell is it working with height 0?
i don't know
the content gives the height
the ttttt
even with height 100% it wont work
100% of 0 is 0
🤔 it's working
you need to use actual unit
how
i just added content
or
html,body{height: 100%;} .bg-image{height: 100%;}divs don't have an intrinsic height, and background images don't change the height of their element
i would use a min-height: 100dvh
thats what i did?
your empty div collapses to zero pixels high, so you can't see the background image at all
you have height: 0 in your pen
so what tag should i use
if you're just displaying an image? <img>
in my react app it's set to 0 by default
what are you trying to do?
i don't want to use img tag
give your bg-image class height with unit any other then %
why?
wait
like, what exactly are you trying to do?
it worke
d
if all you want is to display an image, you have to have a good reason not to just use
img or pictureit was
body
but i don't want the image on the bodydude, what are you trying to do?
what do you intend to do?
what is the final goal?
Clueless Expert
YouTube
GLASS Effect With CSS
A Tutorial on how to add a glass effect to a div with CSS
With this you can create your own variations, just change the CSS properties the way you like it
📋 CODE ⬇️
.glass{
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
b...
in the video he set the background stuff to the body
but i dont want the background to be on a body
it doesn't have to be the body
just make sure your div has a height
that's 100% of the problem
it can be a <div> with height
doesn't work
i would use
min-height: 100dvh; with a min-height: 100vh; fallback;
100% of 0 is 0
to expand on what epic said, the 100% in this makes the div be 100% the height of its parent, which you've set to 0 in the
html, body rulejust for shits and giggles, set it to
height: 300px;
this is my current code
that's still 100% of 0
just try this
on the html, body?
div
in this case, because there is no content (background images don't count) the intrinsic height of html and body are zero
^ yup
no content = no height = 0
ok
wait
ive set to height 300px and it showed something
but the image doesn't display correctly
that's because it's working
it is
using the defaults
it's being rendered at 1 to 1 scale, it's not stretching to fit the div by default
and it's repeating
you're seeing the full width of the image, but only the top 300px
this too
How I want it to be
these are the default values
how it's displaying
it's displaying correctly
but it isn't doing what you want
do what i said here
then it will show at it's full height
there you go
now, you need to center the image
now add
background-size: cover; to the divand a
backgorund-position: centeralready done
it didn't do nothing
it should
where did you set it?
bg-image
the order is wrong
you're overritting everything with the
backgrounddoes that count?
YES
yeah, either put background: at the start, or use background-image
background-image
my sanity is just getting away
well, you're jumping head-first into the deepend of the cesspool of css weirdness
WORKED
WORKED
WORKED
thank you guys
that's what the C in CSS means, Cascading. Things lower down in a sheet override things higher up, and because
background: is a shorthand, it's unsetting anything background related that isn't defined in the background: propertydoesn't work on zoom btw
define "zoom"
CTRL + mouse wheel
define "not work"
it doesn't zoom
it's going to stay at the viewport size, because of the vh/dvh and 100% values
it keeps the size it was displayed at, because of the
background-size: cover;(for asking questions btw, "doesn't work" is supremely unhelpful. "it doesn't work" just means it's not doing what you expected it to do, but we don't know what you expect it to do)
the background image is doing the right thing, even if it seems wrong or doesn't meet your expectations
now good luck to me, because i have to display elements on top of the image
just put stuff inside the div
it's a background
it's on the back
so, everything goes on top
you just have to add content to the div
let me guess
i have to play with position absolute and relative
to do what?
to display other components on top of the image
no, put the content inside the div
Worked!
I just have to do some tweaking with react children
I'm going to be a bit brutally honest here if I'm honest... If you're struggling with this, it's not yet time for you to be learning React
You need to know the basics of HTML, CSS, and JavaScript before you start using frameworks
i know javascript and typescript
i just have to learn CSS which is the most difficult part
but clearly not HTML or CSS, which are just as important
no
I'd strongly recommend against trying to learn both by writing React
wrong screenshot, sorry
yup, learn them by themselves, so you aren't mixing lack of knowledge with lack of knowledge
so i have a
Background component
and it will be my actual main component?
since i put every other component inside?i don't use react
if you're putting everything inside, why not just put it on the body?
body just sucks
why?
you dont want to know
react stuff - everything has to be a component?
if you find out why i hate it then yall prob ban me
unless you hate it for racist or homophobic reasons, that's unlikely
no
thats for another reason
it ends with
y and it irritates me
(you are NOT allowed to react with the skull emoji)I can appreciate hating things for irrational reasons, but you're going to have to learn to live with the existence of the body tag
and you're also going to have to use it if you're going into webdev
I think I will overcomplicate my life with the div stuff
🤷
wait
if i use body
the user doesn't literally care
it's only me and my issues with letters irritating me wtf
the user doesn't care how you code your site, as long as it works. Avoiding using body is going to cause you issues though, but if that's what you want to deal with, that's on you. Just remember an employer isn't going to care and isn't going to accept "I don't like it" as a reason for convoluted sollutions to avoid using the body tag
btw there is another reason i dont want to use the body tag, it doesn't have flexibility?
the body tag does what it needs to do
also, doesn't react create a div with id app?
sometimes you can't use it, but sometimes you have to
the body tag is a container tag that already exists
i understand adding a div, to allow for reducing the width of the size on 24:10 displays
but using the div tag as a body tag, as many do, is just unreasonable
is there a video explaining css to 5 year old
Kevin has a bunch of beginner videos on his channel