Html Image help

why does this show nothing?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #container {
            height: 500px;
            width: 500px;
            background-color: darkcyan;
        }

        #image {
            background-image: url("https://wallpapercave.com/wp/wp2599594.jpg");
        }
    </style>

</head>
<body>
    <div id="conatiner">
        <div id="image"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #container {
            height: 500px;
            width: 500px;
            background-color: darkcyan;
        }

        #image {
            background-image: url("https://wallpapercave.com/wp/wp2599594.jpg");
        }
    </style>

</head>
<body>
    <div id="conatiner">
        <div id="image"></div>
    </div>
</body>
</html>

51 Replies

xKevinFPxOP•16mo ago

the style doesnt work

Mannix•16mo ago

container and conatiner 🙂 a typo

xKevinFPxOP•16mo ago

oh xD thanks

Mannix•16mo ago

np 🙂 dev tools are good for those sort of things 😄

xKevinFPxOP•16mo ago

could you also help me with my main problem, please?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #container {
            height: 200px;
            width: 500px;
            background-color: darkcyan;
        }

        #image {
            height: 100%;
            width: auto;

            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("https://wallpapercave.com/wp/wp2599594.jpg");
            outline: 1px;
        }
    </style>

</head>
<body>
    <div id="container">
        <div id="image"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #container {
            height: 200px;
            width: 500px;
            background-color: darkcyan;
        }

        #image {
            height: 100%;
            width: auto;

            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("https://wallpapercave.com/wp/wp2599594.jpg");
            outline: 1px;
        }
    </style>

</head>
<body>
    <div id="container">
        <div id="image"></div>
    </div>
</body>
</html>

Mannix•16mo ago

what's the problem?

xKevinFPxOP•16mo ago

it doesent matters how big or small the hight or the width of the container is, the image always fits in there. The problem now is, that i dont set a borderradius or background color for the image anymore

xKevinFPxOP•16mo ago

than it would look like this

xKevinFPxOP•16mo ago

i hope you can understand it 🥲

Mannix•16mo ago

you want something like this ? https://codepen.io/MannixMD/pen/oNQVKXZ

Mannix

CodePen

oNQVKXZ

...

xKevinFPxOP•16mo ago

no, i want the border for the image

Mannix•16mo ago

your image is not covering the whole element try cover not contain in background-size

xKevinFPxOP•16mo ago

but i want, that the image still automaticlly fit inside the contanier, yk?

Mannix•16mo ago

background-size: 100% 100%;

xKevinFPxOP•16mo ago

wait i try to explain again, its a bit hard 🥲 So the image has to fit in the container and all parts of the image have to be visible + the image needs a border

Mannix•16mo ago

what border ?

xKevinFPxOP•16mo ago

sorry i mean border-radius

Mannix•16mo ago

like this ? https://codepen.io/MannixMD/pen/oNQVKXZ

Mannix

CodePen

oNQVKXZ

...

xKevinFPxOP•16mo ago

yea

Mannix•16mo ago

i said you should set background-size: 100% 100%; earlier 😉

xKevinFPxOP•16mo ago

wait 😅 its not the solution i dont know how to say it in english xD

xKevinFPxOP•16mo ago

the image goes like ---------------->>>>>>>>>>>>>>>>>>>>

xKevinFPxOP•16mo ago

but i want that the scale? is the same

Mannix•16mo ago

then it won't cover the whole container since it's to small

xKevinFPxOP•16mo ago

thats okay how to do it?

snxxwyy•16mo ago

Could you perhaps draw out what'd you'd like? And that might help us understand better 😄

xKevinFPxOP•16mo ago

okay, ill draw it 😅

snxxwyy•16mo ago

Awesome 👍🏻

xKevinFPxOP•16mo ago

xKevinFPxOP•16mo ago

so the image must always have the same aspect ratios, and has to fit inside the container. And as extra, but its not such important, it should be centered in the middle of the container and it needs a small borderradius

Mannix•16mo ago

you gonna use img element instead of background-image https://codepen.io/MannixMD/pen/vYQPogp

Mannix

CodePen

vYQPogp

...

snxxwyy•16mo ago

Set a max width on the container, set the image inside to be height of a 100% and width of 80% and margin 0 auto

xKevinFPxOP•16mo ago

thannnkssssssss thank you very much oh no wait 🥲

xKevinFPxOP•16mo ago

xKevinFPxOP•16mo ago

is it possible to fix this?

Mannix•16mo ago

don't put height on the #image ??

xKevinFPxOP•16mo ago

yea, but then it goes over the container

xKevinFPxOP•16mo ago

I'm sorry 🥲

Mannix•16mo ago

you gotta make up your mind you either want the container to have 100px or 500px of width or try setting max-width/height as snxxwyy suggested

xKevinFPxOP•16mo ago

yea its workinggggg

Mannix•16mo ago

oh no wait 🥲

xKevinFPxOP•16mo ago

what?

Mannix•16mo ago

jk jk 😄

xKevinFPxOP•16mo ago

xD oh man thank you for your time

Mannix•16mo ago

xKevinFPxOP•16mo ago

now it looks good this way

xKevinFPxOP•16mo ago

and this 😀

Mannix•16mo ago

change the height of the container ?

xKevinFPxOP•16mo ago

yes Heres the full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #container {
            height: 95svh; /* can be changed */
            width: 100%; /* can be changed */
            display: flex;
            margin: 0px;
        }

        #image {
            max-height: 100%;
            max-width: 100%;
            margin: auto;
            outline: 1px;
            border-radius: 2em;
            background-color: red;
        }
    </style>

</head>
<body>
    <div id="container">
        <img id="image" src="https://wallpapercave.com/wp/wp2599594.jpg" alt="">
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #container {
            height: 95svh; /* can be changed */
            width: 100%; /* can be changed */
            display: flex;
            margin: 0px;
        }

        #image {
            max-height: 100%;
            max-width: 100%;
            margin: auto;
            outline: 1px;
            border-radius: 2em;
            background-color: red;
        }
    </style>

</head>
<body>
    <div id="container">
        <img id="image" src="https://wallpapercave.com/wp/wp2599594.jpg" alt="">
    </div>
</body>
</html>

its so cool

Mannix•16mo ago

if the width and height of container can be changed you will also need to change the image at the same time to achieve desired outcome

xKevinFPxOP•16mo ago

no its alright this

everything i wanted :D

Gaming

Programming

Html Image help