W jaki sposób dodać obraz do diva

pytanie zadane 29 lipca 2021 w HTML i CSS przez psyku Obywatel (1,380 p.)

Hej, mam stworzonego diva o wymiarach, powiedzmy 1000x500.

Czy można w niego wstawić obraz, który przybierze rozmiar tego diva jednocześnie nie będzie rozmazany?

Obraz ma wymiary 1900x1200.

1 odpowiedź

odpowiedź 29 lipca 2021 przez Zydu Początkujący (340 p.)

Możesz zrobić coś w tym stylu :)

div {

width: 1000px;

height: 500px;

background: url('https://wallpaperaccess.com/full/908406.jpg');

background-size: cover;

background-position: center;

}

komentarz 29 lipca 2021 przez Zydu Początkujący (340 p.)

W url oczywiście podajesz ścieżkę do swojego obrazu

komentarz 29 lipca 2021 przez psyku Obywatel (1,380 p.)

@Zydu,

<!DOCTYPE html>
<html lang="pl" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dietetyka</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

<div class="logo">

</div>

  </body>
</html>

body
{
  background-color: #F0FFFF;
}

.logo
{
  background: url(image/fruit.jpg);
  background-size: cover;
  height: 300px;
  background-position: center;
  width: 1500px;

}

I niestety nie działa.

komentarz 29 lipca 2021 przez Zydu Początkujący (340 p.)

@psyku

Ciężko poradzić też jak nie wiem jakiego obrazu używasz i jaki efekt chcesz osiągnąć
możesz spróbować się pobawić z pozycją relative i absolute.

coś w tym stylu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            position: relative;
            width: 1500px;
            height: 300px;
            overflow: hidden;
        }

        div img {
            position: absolute;
            top: -800px;
            left: 0;
        }

    </style>
    <title>Document</title>
</head>
<body>
    <div>
        <img src="image/908406.jpg" alt="">
    </div>
</body>
</html>

2	komentarz 29 lipca 2021 przez psyku Obywatel (1,380 p.) Widzę już gdzie popełniłem błąd. Folder image nie znajdował się w folderze css. Przeniosłem folder do folderu css i problem rozwiązany. Dziękuję za próby:)