부트 스트랩

-1

_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>

그리고 나는이 줄에 내 마우스를 올려 놓으면 :

경고 87 검증 (WE) :

-webkit-background-size: cover;

나는이 메시지가 "-webkit -background-size "는 유효한 벤더 특정 속성이 아니거나 더 이상 사용되지 않을 수 있습니다. G :

Site.css :

\ Mijn 문서 내 웹 사이트 \ Lolabikes \ C# \ ContosoUniversity 내용 \ 전체 폭 pics.css \ 14 5 Lolabike

을두면, 내가 이런 식으로 지금이 \

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>

두면,하지만 지금은 모든 페이지 :(

에 노력하고 있습니다 뿐만 아니라 홈페이지에서. 큰 이미지는 다른 페이지가 아닌 홈 페이지에서만 볼 수 있습니다.

당신에게

감사 나는 이런 식으로 할 경우 :

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

내가 크롬에서 (F12)를 찾습니다 :

/* 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에

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

하지만 이미지는 뚜렷하지 않습니다. 전혀 ying.

출처

2014-10-02 Niels Savant

사용이 -

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

출처

2014-10-02 13:45:51 Confuse

안녕 Neutrion이 answare 주셔서 감사합니다 내 편집을 읽었다 -

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;

편집 여기

는 대안인가? –

내 질문을 편집했습니다. 감사합니다 –

? 누구 좀 도와 줘? 고마워요 –

부트 스트랩

답변

관련 문제