Фоновое изображение Bootstrap - PullRequest
Новая
       4

Фоновое изображение Bootstrap

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

Привет, это мой первый вопрос по Stack Owerflow. Я пытаюсь решить проблему с Fenttend Mentor. Я сделал контейнер с 2 столбцами и хочу разместить фоновое изображение SVG слева. Я попытался вставить SVG в файл HTML, и это сработало, но при использовании CSS ничего не происходит. Это код:

'' '

<body>
  <div class="container-fluid">  
     <div class="row"> 
       <div class="col-7 left">
        <h1> We're coming soon</h1>

      Hello fellow shoppers! We're currently building our new fashion store.
      Add your email below to stay up-to-date with announcements and our launch deals.

      Email Address
       </div>

     <!-- Right side -->
    <div class="col-5">
      <img src="images/hero-desktop.jpg">
    </div>
    </div>
   </div>
</body>




.left{
    background-image: url('images/bg-pattern-desktop.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}

' ''

Может кто-нибудь мне помочь.

Не стесняйтесь комментировать мой первый вопрос.

Спасибо, Карстен

Ответы [ 5 ]

1 голос
/ 20 апреля 2020

Это работает. Попробуйте это в bootstrap версии 4.4.1 

.left {
  background: url('images/bg-pattern-desktop.svg') no-repeat center center fixed;
  -webkit-background-size: cover;
   height: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">  
     <div class="row"> 
       <div class="col-7 left">
        <h1> We're coming soon</h1>

      Hello fellow shoppers! We're currently building our new fashion store.
      Add your email below to stay up-to-date with announcements and our launch deals.

      Email Address
       </div>

     <!-- Right side -->
    <div class="col-5">
      <img src="images/hero-desktop.jpg">
    </div>
    </div>
   </div>
</body>
</html>
1 голос
/ 20 апреля 2020

ваш css должен быть в теге <style>, если вы добавляете его на .html странице

, если вы добавляете css в отдельный файл css, тогда убедитесь, что путь к изображению правильно или проверьте вашу консоль вы должны получить 404 файл не найден ошибка

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

Вы можете использовать Bootstrap Сетка, Пример, как показано ниже, для отображения изображения в фоновом режиме в левом столбце и текста в другом столбце в той же строке. 

.container {
  margin: 20px;
  padding: 20x;
  display: flex;
}

.left {
  background-image: url("https://image.shutterstock.com/image-photo/sunset-over-ocean-260nw-66975196.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  width: auto;
}

body {
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Radha Yadav Web Developer</title>
    <link rel="stylesheet" href="css/bootstrap-grid.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="BackgroundImage.css" /> 
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 left">
          <h1>We're coming soon</h1>

          Hello fellow shoppers! We're currently building our new fashion store.
          Add your email below to stay up-to-date with announcements and our
          launch deals. Email Address
        </div>

        <!-- Right side -->
        <div class="col-md-6 right">
            <h1>We're coming soon</h1>

            Hello fellow shoppers! We're currently building our new fashion store.
            Add your email below to stay up-to-date with announcements and our
            launch deals. Email Address
      </div>
    </div>
  </body>
</html>
0 голосов
/ 20 апреля 2020

Пожалуйста, попробуйте этот код, К фоновому изображению Bootstrap 

<body class="left">
  <div class="container-fluid">  
     <div class="row"> 
       <div class="col-7">
        <h1> We're coming soon</h1>

      Hello fellow shoppers! We're currently building our new fashion store.
      Add your email below to stay up-to-date with announcements and our launch deals.

      Email Address
       </div>

     <!-- Right side -->
    <div class="col-5">
      <img src="images/hero-desktop.jpg">
    </div>
    </div>
   </div>
</body>

.left{
    background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
    height:100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}
body{
height:100%;}

Надеюсь, этот код будет вам полезен.

Спасибо.

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

Попробуйте следующим образом:

Вся остальная работа великолепна, просто укажите свой точный путь: 

{
  background-image: url("C:\Desktop\images\bg-pattern-desktop.svg");
}

Просто найдите место, где находится образ, то есть его каталог для диска root и добавить с именем изображения

Как: каталог root + имя изображения c: \ Users (имя пользователя) \ Desktop \ + picture.jpg.

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

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

...