Блог

Главная - Вопросы по программированию - Как установить фоновое изображение для всех страниц в reactjs

Как установить фоновое изображение для всех страниц в reactjs

#html #css #reactjs #image #background-image

#HTML #css — код #reactjs #изображение #фоновое изображение

Вопрос:

Я попытался установить изображение на все страницы в качестве фона. Я попытался установить стиль тега body для index.html 

 <body style="background-image: url(%PUBLIC_URL%/bp.jpg)">

Но это ничего не дало.
Поэтому я попытался добавить его в body тег в index.css in src/ . Я переместил изображение из общей папки в /src .

Но и это тоже ничего не дало.

 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url("./bg.jpg");
}

Итак, моей последней попыткой было App.css, где находится моя маршрутизация:

App.js:

 import './App.css';
import { BrowserRouter as Router, Route } from "react-router-dom";
import CharacterFormView from "./views/CharacterFormView";
import SkillTreeView from "./views/SkillTreeView";

function App() {
  return (
    <div className="App">
      <Router>

        <Route exact path="/" component={CharacterFormView}/>
        <Route path="/character-form" component={CharacterFormView}/>
        <Route path="/skill-trees" component={SkillTreeView}/>

      </Router>
    </div>
  );
}

export default App;

App.css:

     .App {
      text-align: center;
      background: url("./bg.jpg") no-repeat;
      background-size: cover;
    
    }

В этой последней попытке установите фоновое изображение для первых двух маршрутов "/" и "/character-form" .
Даже там он не на весь экран, а только до половины страницы.
Если я перейду к "/skill-trees" — там нет изображения на заднем плане

Итак, как я могу установить одно и то же изображение в качестве фонового изображения для всех страниц? Изображение не должно повторяться только во весь экран. Я уверен, что есть лучший способ установить его в каждом CSS-файле моего проекта.

Заранее благодарю.

Ответ №1:

Фон может быть включен в ваш App.css, но вам нужно использовать его следующим образом:

  .App {
      text-align: center;
      background-image: url("./bg.jpg"); // here you had it wrong
      background-size: cover;
    }

Таким образом, ваш фон будет отображаться в вашем основном компоненте, App.js в вашем случае, следовательно, во всех его дочерних элементах

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

1. мой синтаксис является допустимым css. Посмотрите на это. И я тоже попробовал ваше решение, но оно по-прежнему показывает фоновое изображение до половины страницы. Другая половина пуста. И он не работает с / skill-деревьями, как я описал в вопросе

2. Возможно, с вами происходит то, что высота ваших элементов определяет высоту вашей страницы. Обычно я создаю верхний элемент с height: 100vh помощью и все дочерние элементы могут использоваться height: 100% для расширения на всю высоту моей страницы. Возможно, вам потребуется добавить overflow: auto их для правильной прокрутки, но вы будете уверены, что ваш элемент покрывает всю страницу и, следовательно, имеет фоновое изображение.

3. @LucasPadovan большое вам спасибо. Это устранило проблему. Я сел . Приложение к высоте: 100vh. После этого изображение расширилось до полного размера на всех страницах