1

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

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

введите сюда описание изображения

Вот мой код

<%@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;
}
7
  • если в боаузерной строке обратиться к файлу он по этому пути откроется? 15 мая 2019 в 6:02
  • нет, может я не правильно что то сделал
    – damagedd
    15 мая 2019 в 6:08
  • очевидно да, ресурсы не раздаются, необходимо добиться чтобы открывалось, т.е. проблема не в коде 15 мая 2019 в 6:33
  • А в чем может быть
    – damagedd
    15 мая 2019 в 6:35
  • web xml покажите и я не очень догоняю структуру проекта пока, по скрину сложно 15 мая 2019 в 6:36

1 ответ 1

0

.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

13
  • Получается просто только URL поменять? я поменял все так же
    – damagedd
    15 мая 2019 в 7:36
  • тогда добавте ещо одно поднятие на уровень выше ../../
    – klifort
    15 мая 2019 в 7:39
  • Я правил код, посмотрите правильно же правил
    – damagedd
    15 мая 2019 в 7:41
  • у вас css читается?
    – klifort
    15 мая 2019 в 7:44
  • да он читается кажется
    – damagedd
    15 мая 2019 в 7:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.