1. дома
  2. Вопрос и ответ
  3. Bootstrap на домашней странице полного изображения

Bootstrap на домашней странице полного изображения

2014-10-02 8 views
-1

У меня есть это:Bootstrap на домашней странице полного изображения

_layout:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - LolaBikeMen</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 

</head> 
<body> 



    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        @*<span class="icon-bar"></span> 
        <span class="icon-bar"></span>*@ 
        <span class="icon-bar"></span> 
       </button> 



       @Html.ActionLink("LolaBikeMen", "Index", "Home", null, new { @class = "navbar-brand" }) 
      </div> 
      <div class="navbar-collapse collapse"> 
       <br /> 


        <ul class="nav navbar-nav"> 
         @*<li>@Html.ActionLink("Home", "Index", "Home")</li>*@ 
         <li class="nav ">@Html.ActionLink("WHO", "About", "Home")</li> 
         <li class="nav ">@Html.ActionLink("WHAT", "Index", "Student")</li> 
         <li class="nav ">@Html.ActionLink("AGENDA", "Index", "Course")</li> 
         <li class="nav">@Html.ActionLink("PHILOSPY", "Index", "Instructor")</li> 
         <li class="nav">@Html.ActionLink("BUCKET-LIST", "Index", "Department")</li> 
         <li class="nav">@Html.ActionLink("LolaRiders", "Index", "LolaBiker")</li> 
         <li class="nav">@Html.ActionLink("bycicle", "Index", "Bycicle")</li> 

         @*<li class="nav"> @Html.Partial("_LoginPartial")</li>*@ 

        </ul> 



      </div> 


     </div> 
    </div> 
    @*<li class="nav"><img src="~/Images/LolabikesCoffeeLogo3.jpg"> </li>*@ 
    <div class="container"> 
     @RenderBody() 

     @*<footer> 
      <p>&copy; @DateTime.Now.Year - LolaBikeMen</p> 
     </footer>*@ 
    </div> 

    @*<div class="fill"> 


    </div>*@ 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/Cyborg-bootstrap.min") 
    @RenderSection("scripts", required: false) 
</body> 
</html>

CSS:

/* Move down content because we have a fixed navbar that is 50px tall */ 
.container{ 
    /*background-color:MenuText;*/ 
} 
.container2{ 

    width:100%; 
    height:100%; 
} 

body { 
    padding-top: 90px; 
    padding-bottom: 20px; 

} 

html { 
      background: url(~/Images/Large.JPG) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
     } 

.wrapper { 
    background-image: url(../Images/Large.JPG); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    width: 100%; 
    height: 100%; 

} 
.wide { 
    width:100%; 
    height:1000px; 
    background-image:url('../Images/Large.JPG'); 
    background-size:cover; 
} 

.wide img { 
    width:100%; 
} 

navbar{ 
    color:white; 
} 

.table-striped>tr>td:nth-child(odd)>td, 
.table-striped>tr>td:nth-child(odd)>td { 
    background-color:white; 
} 

.table.table-condensed tr th { 
    border-top: 1px solid white; 
} 

.table.table-condensed tr th { 
    border-bottom: 1px solid white; 
} 

.a:hover, a:focus { 
     color:floralwhite; 
     text-decoration: underline; 
    } 

a { 
    color:floralwhite; 
    text-decoration: none; 
} 

.table.table-condensed tr td { 
    border-bottom: 1px solid white; /* Change the color you want to set */ 
} 

.wrapper { 
    width: 100%; 
    background-color: lightcyan; 
} 

img { 
    background-image: url('../Images/Large.JPG'); 
    background-repeat: no-repeat; 
    background-position:top; 
    background-size:cover; 
    width: 100%; 
    height: 100%; 
} 

/**/ 
#map { 
     height: 100%; 
     width: 100%; 
} 

#map img { 
     max-width: 100%; 
} 

html, body { 
     height: 100%; 
     width: 100%; 
} 

.fullscreen, 
.content-a { 
    width:100%; 
    min-height:100%; 
} 

.background { 
    background-repeat:no-repeat; 
    /* custom background-position */ 
    background-position:50% 50%; 
    /* ie8- graceful degradation */ 
    background-position:50% 50%\9 !important; 
} 

.fill { 
    top: -30px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position:relative; 
    /*overflow-x;*/ 
    width:100%; 
    height:100%; 
} 

html,body{height:100%;} 
.carousel,.item,.active{height:100%;} 
.carousel-inner{height:100%;} 
.fill{width:100%;height:100%;background-position:center;background-size:cover;} 

.navbar { 
     margin-bottom: 0; 
} 

/* Demo */ 
#map { background:black; } 




/**/ 

/* Wrapping element 
/* Set some basic padding to keep content from hitting the edges */ 
.body-content { 
    padding-left: 15px; 
    padding-right: 15px; 


} 

/* Override the default bootstrap behavior where horizontal description lists 
    will truncate terms that are too long to fit in the left column 
*/ 
.dl-horizontal dt { 
    white-space: normal; 
} 

/* Set widths on the form inputs since otherwise they're 100% wide */ 
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="select"] { 
    max-width: 280px; 
} 

/* Responsive: Portrait tablets and up */ 
@media screen and (min-width: 768px) { 
    .jumbotron { 
     margin-top: 20px; 
    } 
    .body-content { 
     padding: 0; 

    } 
}

И INdex.cshtml (домашняя страница):

@{ 
    ViewBag.Title = "Home Page"; 


} 

<div class="container2 fill"> 
    <div id="map"> 
     <img src="~/Images/VeryLarge.JPG" class="img-responsive" alt="Responsive image"> 
    </div> 
</div> 

<!--1st Large Banner Image --> 
@*<div class="wrapper"> 
    <img src="~/Images/Large.JPG" class="img-responsive" alt="Responsive image"> 
    <div class="col-sm-6"> 
     @*<h1 id="text">Hello World!</h1>*@ 


@*<div class="jumbotron hidden-sm" > 
     <img src="~/Images/IMG_4954 - Copy.JPG"> 
    </div>*@ 

<script type="text/javascript"> 
    $('.carousel').carousel(); 
</script>

Поэтому на главной странице у меня есть одно большое изображение. Но он не заполняет ширину отверстия. А также высота не заполняет весь экран. И я хочу это, если вы сделаете экран меньшим, чем тогда изображение обрезается - так зависит от размеров экрана. На остальных страницах я не хочу использовать всю ширину. Так что я не могу оставить это вне на это на _Layout.cshtml:

<div class="container"> 
     @RenderBody() 

     @*<footer> 
      <p>&copy; @DateTime.Now.Year - LolaBikeMen</p> 
     </footer>*@ 
    </div>

Спасибо

Оке, я прибавил: к site.css:

.background { 
    background: url(../Images/Large.JPG) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

}

, но как будет Так выглядит страница index.cshtml?

так:

<div class="background"> 

</div>

И если я наведите мышь на этой линии:

-webkit-background-size: cover;

Я получаю сообщение:

Предупреждение 87 Validation (WE): «-webkit -background-size "не является допустимым специфическим для поставщика или он, возможно, устарел. G: \ Mijn Documents \ My Web Sites \ Lolabikes \ C# \ ContosoUniversity \ Content \ полной ширины-pics.css 14 5 Lolabike

Оке, у меня есть сейчас, как это:

site.css:

body { 

    background-image: url('../Images/Large.JPG'); 
    background-repeat: no-repeat; 
    background-attachment: fixed;background-size: 100%; 
    /*padding-top: 90px; 
    padding-bottom: 20px;*/ 

}

и index.cshtml:

<div class="container fill"> 
    <div id="map"> 

    </div> 
</div>

Оке, но теперь работает на всех страницах :(

И не только на главной странице. Большое изображение нужно видеть только на домашней странице, а не на других страницах.

Спасибо

и если я делаю это так:

/* Move down content because we have a fixed navbar that is 50px tall */ 
.container{ 
    /*background-color:MenuText;*/ 
} 
.container2{ 

    width:100%; 
    height:100%; 
} 

body { 


    /*padding-top: 90px; 
    padding-bottom: 20px;*/ 

} 

/*html { 
      background: url(~/Images/Large.JPG) no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
     }*/ 

.wrapper { 
    background-image: url(../Images/Large.JPG); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    width: 100%; 
    height: 100%; 

} 
.wide { 
    width:100%; 
    height:1000px; 
    background-image:url('../Images/Large.JPG'); 
    background-size:cover; 
} 

.wide img { 
    width:100%; 
} 

navbar{ 
    color:white; 
} 

.table-striped>tr>td:nth-child(odd)>td, 
.table-striped>tr>td:nth-child(odd)>td { 
    background-color:white; 
} 

.table.table-condensed tr th { 
    border-top: 1px solid white; 
} 

.table.table-condensed tr th { 
    border-bottom: 1px solid white; 
} 

.a:hover, a:focus { 
     color:floralwhite; 
     text-decoration: underline; 
    } 

a { 
    color:floralwhite; 
    text-decoration: none; 
} 

.table.table-condensed tr td { 
    border-bottom: 1px solid white; /* Change the color you want to set */ 
} 

.wrapper { 
    width: 100%; 
    background-color: lightcyan; 
} 

img { 
    background-image: url('../Images/Large.JPG'); 
    background-repeat: no-repeat; 
    background-position:top; 
    background-size:cover; 
    width: 100%; 
    height: 100%; 
} 

/**/ 
#map { 
     height: 100%; 
     width: 100%; 
} 

#map img { 
     max-width: 100%; 
} 

html, body { 
     height: 100%; 
     width: 100%; 
} 

.fullscreen, 
.content-a { 
    width:100%; 
    min-height:100%; 
} 


.background { 
    background-image: url('../Images/Large.JPG'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 100%; 

} 

.fill { 
    top: -30px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position:relative; 
    /*overflow-x;*/ 
    width:100%; 
    height:100%; 
} 

html,body{height:100%;} 
.carousel,.item,.active{height:100%;} 
.carousel-inner{height:100%;} 
.fill{width:100%;height:100%;background-position:center;background-size:cover;} 

.navbar { 
     margin-bottom: 0; 
} 

/* Demo */ 
#map { background:black; } 




/**/ 

/* Wrapping element 
/* Set some basic padding to keep content from hitting the edges */ 
.body-content { 
    padding-left: 15px; 
    padding-right: 15px; 


} 

/* Override the default bootstrap behavior where horizontal description lists 
    will truncate terms that are too long to fit in the left column 
*/ 
.dl-horizontal dt { 
    white-space: normal; 
} 

/* Set widths on the form inputs since otherwise they're 100% wide */ 
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="select"] { 
    max-width: 280px; 
} 

/* Responsive: Portrait tablets and up */ 
@media screen and (min-width: 768px) { 
    .jumbotron { 
     margin-top: 20px; 
    } 
    .body-content { 
     padding: 0; 

    } 
}

и в index.cshtml:

<div class="background"></div>

и я смотрю в хроме (F12):

Remote Address:::1:41787 
Request URL:http://localhost:41787/Images/Large.JPG 
Request Method:GET 
Status Code:200 OK (from cache)

но изображение не dis-pla вообще.

источник

2014-10-02 Niels Savant

ответ

0

Используйте это -

background: url(../Images/Large.JPG) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;

EDIT

Вот альтернатива -

body { 
    background-image: url(../Images/Large.JPG); 
    background-repeat: no-repeat; 
    background-attachment: fixed;background-size: 100%; 
}

источник

2014-10-02 13:45:51 Confuse

+0

Привет Neutrion спасибо за answare, вы читали мою редактировать? –

+0

У меня есть мой вопрос. ЧТОБЫ ВАС –

+0

? Кто-нибудь помогает? Спасибо –

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

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