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

xKevinFPx•11mo ago

the style doesnt work

Mannix•11mo ago

container and conatiner 🙂 a typo

xKevinFPx•11mo ago

oh xD thanks

Mannix•11mo ago

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

xKevinFPx•11mo 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•11mo ago

what's the problem?

xKevinFPx•11mo 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

xKevinFPx•11mo ago

than it would look like this

xKevinFPx•11mo ago

i hope you can understand it 🥲

Mannix•11mo ago

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

Mannix

CodePen

oNQVKXZ

...

xKevinFPx•11mo ago

no, i want the border for the image

Mannix•11mo ago

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

xKevinFPx•11mo ago

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

Mannix•11mo ago

background-size: 100% 100%;

xKevinFPx•11mo 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•11mo ago

what border ?

xKevinFPx•11mo ago

sorry i mean border-radius

Mannix•11mo ago

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

Mannix

CodePen

oNQVKXZ

...

xKevinFPx•11mo ago

yea

Mannix•11mo ago

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

xKevinFPx•11mo ago

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

xKevinFPx•11mo ago

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

xKevinFPx•11mo ago

but i want that the scale? is the same

Mannix•11mo ago

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

xKevinFPx•11mo ago

thats okay how to do it?

snxxwyy•11mo ago

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

xKevinFPx•11mo ago

okay, ill draw it 😅

snxxwyy•11mo ago

Awesome 👍🏻

xKevinFPx•11mo ago

xKevinFPx•11mo 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•11mo ago

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

Mannix

CodePen

vYQPogp

...

snxxwyy•11mo 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

xKevinFPx•11mo ago

thannnkssssssss thank you very much oh no wait 🥲

xKevinFPx•11mo ago

xKevinFPx•11mo ago

is it possible to fix this?

Mannix•11mo ago

don't put height on the #image ??

xKevinFPx•11mo ago

yea, but then it goes over the container

xKevinFPx•11mo ago

I'm sorry 🥲

Mannix•11mo 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

xKevinFPx•11mo ago

yea its workinggggg

Mannix•11mo ago

oh no wait 🥲

xKevinFPx•11mo ago

what?

Mannix•11mo ago

jk jk 😄

xKevinFPx•11mo ago

xD oh man thank you for your time

Mannix•11mo ago

xKevinFPx•11mo ago

now it looks good this way

xKevinFPx•11mo ago

and this 😀

Mannix•11mo ago

change the height of the container ?

xKevinFPx•11mo 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•11mo 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

xKevinFPx•11mo ago

no its alright this

everything i wanted :D

Gaming

Programming

Html Image help