Как сделать изображение подходящим на странице с навигацией

Итак, что я пытаюсь сделать, это сделать изображение на странице без прокрутки. Очевидно, что jumbotron и nav толкают изображение вниз, поэтому для меня смысл, это поставить изображение за jumbotron и nav. Я попробовал переполнение скрытого, и это, похоже, не сработало. Я также попытался положить все в свою обертку, что сработало, но тогда мой отзывчивый дизайн все испортился. Это изображение здесь, которое будет охватывать страницу: [https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg][1].Как сделать изображение подходящим на странице с навигацией

Вот мой код:

html, body { 
 
margin: 0; 
 
padding: 0; 
 
display: table; 
 
width: 100%; 
 
height: 100%; 
 
} 
 
.jumbotron { 
 
background-color: rgba(51, 51, 51, 1); 
 
padding-bottom: 0; 
 
margin-top: -20px; 
 
margin-bottom: 0; 
 
padding-top: 20px; 
 
h1 { 
 
font-size: 5em; 
 
text-transform: uppercase; 
 
font-weight: 100; 
 
color: #fff; 
 
margin: .2em 0 0 .2em; 
 
letter-spacing: .2em; 
 
span { 
 
font-weight: normal; 
 
} 
 
} 
 
p { 
 
color: #fff; 
 
margin-right: .5em; 
 
margin-bottom: 0; 
 
} 
 
#slogan { 
 
font-size: 1.2em; 
 
margin: 0; 
 
margin-right: 20px; 
 
} 
 
} 
 
.navbar { 
 
background-color: rgba(51, 51, 51, 1); 
 
border-radius: 0; 
 
margin-top: 0; 
 
margin-bottom: 0; 
 
min-height: 0; 
 
border: none; 
 
li a { 
 
outline: none; 
 
text-transform: uppercase; 
 
padding: 5px 15px 10px 15px; 
 
font-size: .9em; 
 
} 
 
} 
 
.wrapper{ // The wrapper is ONLY on the index.html page. 
 
// position: relative; 
 
display: table; 
 
width: 100%; 
 
height: 100%; 
 
text-align: center; 
 
color: #FFF; 
 
background-image: url("https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg"); 
 
background-position: center center; 
 
background-size: cover; 
 
} 
 
.h2_slogan { 
 
font-weight: 100; 
 
font-size: 3em; 
 
text-transform: uppercase; 
 
margin-top: 1em; 
 
}

<header class="jumbotron"> 
 
    <h1>John <span>Smith</span></h1> 
 
    <p class="text-right" id="slogan">Accessible. Affordable. Dependable.</p> 
 
</header> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav text-center"> 
 
      <li><a href="index.html">Home</a></li> 
 
      <li><a href="about.html">About</a></li> 
 
      <li><a href="#">Skills</a></li> 
 
      <li><a href="#">Portfolio</a></li> 
 
      <li><a href="contact.html">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
</nav> 
 
<div class="wrapper"> 
 
    <h2 class="text-center h2_slogan">Web Developer & Designer</h2> 
 
</div>

источник

2016-01-11 J.Bon

Вы пытались поместить изображение в качестве фона для 'body'? или уменьшить «высоту» изображения? –

@MaihanNijat Да, но я хочу только его на своей домашней странице. Если я положил его на тело, он появится на всех моих других страницах. –

Он не появится на всех ваших других страницах, если вы поместите его в качестве фона в теле. –

Вы можете просто добавить его в свой body это поставит его позади как jumbotron и navbar.

Что вы делаете:

изменить это в вашем HTML

От:

<body>

To:

<body id="homepage">

Добавьте это в CSS:

body { 
    background-image: url("../img/header.jpg"); 
    background-position: center center; 
    background-size: cover; 
    background-repeat: no-repeat; 
}

И это в основном это.

JsFiddle

Надеется, что это помогает!

источник

2016-01-11 17:32:20 Simplicity

Это будет работать, но я не хочу, чтобы изображение отображалось на других страницах. Я должен был быть более конкретным на этом посту. Но я просто хочу, чтобы он появился на странице index.html (home). –

@ J.Bon использовать встроенный стиль для тела или определить класс или идентификатор для тела. –

@ J.Bon Я отредактировал свой ответ – Simplicity

Как сделать изображение подходящим на странице с навигацией

ответ

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