Как увеличить размер фонового изображения?

Я пытаюсь поместить полный размер в фоновое изображение, высота отлично работает, но ширина не работает.Как увеличить размер фонового изображения?

здесь файл index.html.er:

<!-- Intro Header --> 
    <header class="intro"> 
     <div class="intro-body"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-8 col-md-offset-2"> 
         <h1 class="brand-heading">Mota Project Live</h1> 
         <p class="intro-text">Have a joy with Mota Project Live the most experimental music.<br>Let's Join us and Joy!</p> 
         <a href="#about" class="btn btn-circle page-scroll"> 
          <i class="fa fa-angle-double-down animated"></i> 
         </a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </header>

Здесь application.html.erb файл:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title><%= content_for?(:title) ? yield(:title) : "Mota Project Live" %></title> 
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Mota Project Live" %>"> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
    </head> 
    <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
    <header> 
     <%= render 'layouts/navigation' %> 
    </header> 
    <main role="main" class= "container"> 
     <div class="row"> 
     <div class="col-lg-12"> 
      <%= render 'layouts/messages' %> 
      <%= yield %> 
     </div> 
     </div> 
    </main> 
    <%= render 'layouts/footer' %> 
    </body> 
</html>

И мой файл .scss:

.intro { 
    display: table; 
    width: 100%; 
    height: auto; 
    padding: 100px 0; 
    text-align: center; 
    color: #fff; 
    background: url('intro-bg.jpg') no-repeat bottom center scroll; 
    background-color: transparent; 
    background-attachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 

} 

.intro .intro-body { 
    display: table-cell; 
    vertical-align: middle; 
} 

.intro .intro-body .brand-heading { 
    font-size: 40px; 
    padding: 80px; 
} 

.intro .intro-body .intro-text { 
    font-size: 18px; 
}

источник

2015-06-03 rld

Я думаю, что если вы укажете ширину тега «header» на 100%, то это может сработать. попробуйте это. –

добавить размер фона: 100%; в css –

Привет SachinR, я поставил тег заголовка: header {width: 100%; } и не работают. Благодаря! – rld

фон -прикрепление: исправлено; ведет себя как положение: фиксировано, и поэтому изображение удаляется из потока документа, и, таким образом, размер фона: обложка; не имеет никакого эффекта.

Как в стороне, вам почти наверняка не нужно использовать префикс фона для фона. http://caniuse.com/#search=background-size

источник

2015-06-03 11:06:11

Я разрезал «background-attachment: fixed» и ничего не делал. Спасибо Пол Грин. – rld

Попробуйте добавить следующую строку в .into классе

background: url('intro-bg.jpg') no-repeat bottom 100% scroll;

источник

2015-06-03 11:08:30

Привет, Арслан, я пробовал это на 100%, и изображение было скрыто. Благодаря! – rld

Я решить эту проблему и решение проблемы было в сетке. что я делаю, это изменить файл application.html.erb и class="container" в главном для fluid. Я изменяю для:

<main role="main" class= "container-fluid">

и работает отлично. И проблема была не в файле css. Спасибо, ребята, за помощь.

источник

2015-06-04 16:11:55 rld

Как увеличить размер фонового изображения?

ответ

Смежные вопросы