Добавление фонового изображения в CSS с использованием HTML - PullRequest
Новая
       0

Добавление фонового изображения в CSS с использованием HTML

0 голосов
/ 17 апреля 2020

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

HTML file 

<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">
<h1>Welcome to my First CSS page.</h1>
</body>
</html>

и CSS file 

body{
    background-image: url(""C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg"");
    background-size: cover;
    background-attachment: fixed;
}

Ответы [ 4 ]

2 голосов
/ 17 апреля 2020

Проблема с вашими двойными кавычками в URL, вы должны удалить их. Кроме того, вы можете использовать относительный путь, чтобы получить изображение из пути вашего проекта.

0 голосов
/ 17 апреля 2020

Вам необходимо переместить файл css в основную папку (так же, как файл html). И создайте div (контейнер, куда должен прийти фон), который содержит ваш h1. И вы не должны использовать полный URL, который вы можете просто использовать foldername / imagname.jpg. Вот как это должно выглядеть.

Папка.

- html. html

-practice. css

-imagefolder --image.jpg

Если у вас есть это, вы можете изменить ссылку css на: 

<link rel="stylesheet" type="text/css" href="practice.css">

А затем в теге body вы создадите div с классом: 

<div class="body">
  <h1>Welcome to my First CSS page.</h1>
</div>

Если у вас есть это, вы можете дать телу div фоновое изображение с помощью css: 

.body{
  background-image: url(image/landscape.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 500px;
}
0 голосов
/ 17 апреля 2020 
style="background-image: url('img_shirjeel.jpg'); height: 100%; background-position: center; background-repeat: no-repeat;background-size: cover;"

попробуйте это в том теге или теле, где вы хотите изображение. и сделайте Google в первую очередь.

0 голосов
/ 17 апреля 2020

Вот рабочий пример, вы допустили одну ошибку и одну неудачную практику: - Вы использовали двойной "" "" в качестве фонового URL - Ссылка CSS рекомендуется в голове. Вы можете положить его в тело, но поместите его в конец. 

body{
  background-image: url("C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\landscape.jpg");
  background-size: cover;
  background-attachment: fixed;

  /* DEMO, remove */ background-image: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg");
  /* DEMO, remove */ color: #fff;
}
<!DOCTYPE html>
<html>
<head>
    <title>CSS</title>
    <!-- comment out -->
    <!--<link rel="stylesheet" type="text/css" href="C:\Users\Shirjeel\Desktop\Web-Development\site\CSS\practice.css">-->
</head>
<body>
    
<h1>Welcome to my First CSS page.</h1>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...