Браузер не читает фоновое изображение

16 декабря 2020, 16:20

Привет я хочу поставить фоновое изображение своему сайту. Но браузер не читает его

Я вроде путь к картинке сделал правильным

Вот мой код

<%@page contentType="text/html" pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <link href="../css/style.css" rel="stylesheet" type="text/css">
        <style><%@include file="/css/style.css"%></style>

        <title>Home Page</title>


<body>
<body class="bg-full">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">School</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Главная</a></li>
            <li><a href="#">Наш университет</a></li>
            <li><a href="#">Электронный журнал</a></li>
            <li><a href="#">Студенты</a></li>
            <li><a href="#">Фотогалерея</a></li>
            <li><a href="#">Карьера</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
        <form class="navbar-form navbar-left" action="/action_page.php">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" name="search">
            </div>
            <button type="submit" class="btn btn-default">Поиск</button>
        </form>
    </div>
</nav>
<div class="container">
</div>
<div class="container">
</div>

<div class="bg">
    <div class ="pokaz">
        <form action="allStudents" method="post">
            <input class="btn btn-primary" type="submit" value="Показать всех студентов">
        </form>
    </div>
</div>
</body>
</html>

Web XML

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    id="WebApp_ID" version="3.0">
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <error-page>
    <location>/errors</location>
  </error-page>
</web-app>

Мой style.css

bg-full { 
    background-image: url('../../images/home.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover;
    position: relative; 
    height: 100%; }

.bg{
    background-color: black;
}
.it{
  width:80%;
  margin:auto;
}

.pokaz{
   margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 

}
.add{
   width:80%;
  margin:auto;
}

Answer 1

.bg-full{ 
  background-image: url("../images/home.jpg"); 
  background-repeat: no-repeat; 
  background-size: cover; 
  position: relative; 
  height: 100%; 
}

<body class="bg-full"><body>

Если у вас есть структура папок:

* Web-XML/views * index.jsp * images/ * home.jpg

то код CSS должен быть

html{ background-image: url("../images/home.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; height: 100%; }

../ в URL поднимается на один уровень вверх в структуре каталогов. Здесь он может найти папку images. Затем он находит изображение home.jpg

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

07:09
17:51

Как выбрать ноутбук для школьника
08:01
07:36

Что такое Grid Бот
07:00

Використання UGC контенту для соціальних мереж
21:22

Использование тестового аккаунта Google Analytics
20:00

Почему стоит покупать лицензионное ПО
20:14
07:41

Методы повышения посещаемости веб-сайта

Все вопросы

ТОП-10

Все популярные вопросы

Можно ли как-то отслеживать возникающие на устройствах ошибки онлайн?

Я не силен в android разработке, но интересует вопрос, есть ли какие-то сервисы для сбора логов устройств онлайн, error-трекеры для android? Если кто-то...

102

Java