Блог

Главная - Вопросы по программированию - Как поместить изображение в нижней части страницы/все остальное в HTML?

Как поместить изображение в нижней части страницы/все остальное в HTML?

#html

Вопрос:

Итак, я абсолютный новичок и только учусь создавать веб-сайт. Я пытаюсь поместить изображение под текстом «это то, что я делаю» на этом сайте https://20sparks.github.io/portfolio/

Я просто хочу поместить изображение под этим

текст и сделайте его во всю ширину, например, 1920х700. Я уже погуглил, как это сделать, но абсолютно никакой код, который я нашел, не сработал.

Я прикрепил код веб-сайта, чтобы любой мог взглянуть. Я знаю, что должен использовать что-то вроде добавления изображения на свою веб-страницу, но я понятия не имею, где разместить эту строку кода и как заставить изображение перейти в нижнюю часть веб-страницы.

Если бы кто-нибудь мог объяснить, как это сделать для начинающих, я был бы очень признателен.

 <html>
  <head>
    
  <body style="background-color:black;">
    <h1>hello</h1>    
        <style type="text/css">
      h1
      {
        margin:0;
        padding: 0;   
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translateX(-50%) translateY(-50%);
       
      }
          
    </style>
    <p>this is what i do</p> 
     <img src="daniel-leone-v7daTKlZzaw-unsplash.jpg" alt=mountains">
     <style type="text/css">
       p
       {
        margin:0;
        padding: 0;   
        font-family: Arial, Helvetica, sans-serif;
        font-size: 50px;
        text-align: center;
        color: white;
        position: absolute;
        top: 120%;
        left: 50%;
        transform:translateX(-50%) translateY(-50%);
       
      }
       </style>
    </body>

</html>

Ответ №1:

Можете ли вы предоставить весь код? Все html-теги также должны иметь закрывающий тег (кроме img,br и т.д.)

  1. Похоже,вам не хватает закрывающего тега в html,заголовке,теле, стиле
  2. Вам не хватает реального изображения

что-то вроде этого:

 <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Есть много способов, которыми вы можете разместить свое изображение внизу. Вот один из способов.

https://codepen.io/lefter/pen/ExXgzXW

Комментарии:

1. Пожалуйста, укажите дополнительную информацию в своем ответе. Как это написано в настоящее время, трудно понять ваше решение.

2. Эй, спасибо за твой ответ. Я попытался скопировать и вставить строку <img src> из вашего примера, однако вместо изображения, появляющегося в нижней части страницы, оно просто превращается в фоновое изображение, которое мне не нужно. Я обновил фрагмент кода, чтобы вы могли видеть весь код, который у меня есть.

3. вам также нужно скопировать стили css

4. Я не совсем понимаю, что вы имеете в виду. Мне нужно скопировать оба кода, которые вы предоставили, чтобы достичь этого результата? Если да, то пишу ли я код CSS в том же файле, что и HTML, или где еще я могу написать код CSS?

Ответ №2:

Один из способов сделать это-использовать свойство background-image в css. Вы можете добавить свойство к элементу body, и изображение должно появиться за всеми остальными элементами.

 <style>
  body {
    background-image: url("https://picsum.photos/1920/700");
    background-size: cover;
    background-repeat: no-repeat;
  }
</style>

В качестве примечания вы можете иметь несколько селекторов css внутри одного тега стиля. И стили должны быть помещены внутри тега head.

 <html>
  <head>
    <style>
      body {
        ...
      }

      h1 {
        ...
      }
    </style>
  </head>

  <body>
    ...
  </body>
</html>
Метки: