locked
Unable to render scrollable image background homepage RRS feed

  • Question

  • User-872746141 posted

    I am using the "ASP.NET Core Web Application" template in (2.2 MVC).

    I attempted to use a w3schools HOWTO sample to render scrollable image background to my home page which is written in asp.net core razor cshtml file.

    https://www.w3schools.com/howto/howto_css_bg_change_scroll.asp

    The text box in the centre worked so I got rid of it. But I cannot render any image from my file in wwwroot\lib\bootstrap\dist\css\bootstrap.css to the homepage view and the image path appears to be correct as intellisense found the path to all images.

    The difficulty is that both these html selectors “html” and “body” are combined into one in the tutorial and in my page both selectors are separated and I don’t know which one should have the height property set to 100% as it is in the tutorial.

    I tried setting both to 100% with no effect or resolve of my issue.

    Here is my summary code for the bootstrap.css file containing the scrollable image background.

    html {
      font-family: sans-serif;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    * {
      box-sizing: border-box;
    }
    
    .bg-image {
      /* Full height */
      height: 50%;
    
    /* Center and scale the image nicely */
      background-;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    /* Images used */
    .img1 {background-image: url("../../images/pitcher1.jpg");}
    .img2 {background-image: url("../../images/pitcher2.jpg");}
    .img3 {background-image: url("../../images/pitcher3.jpg");}
    .img4 {background-image: url("../../images/pitcher4.jpg");}
    
    article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
      display: block;
    }
    
    body {
      margin: 0;
      font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #EBEBEB;
      text-align: left;
      background-color: #2B3E50;
    }
    

    Here is the code from my Home View folder page Index.cshtml

    @{
        ViewData["Title"] = "Home Page";
    }
    
    <div class="bg-image img1"></div>
    <div class="bg-image img2"></div>
    <div class="bg-image img3"></div>
    <div class="bg-image img4"></div>
    
        <div class="col-md-4">
            <h2>Welcome to Contoso University</h2>
            <p>
                Contoso University is a sample application that
                we will use as template to use Entity Framework Core
                with an ASP.NET Core MVC web application.
            </p>
        </div>
        <div class="col-md-4">
            <h2>Build it from scratch</h2>
            <p>You can build the application by following the steps in a series of tutorials.</p>
            <p><a class="btn btn-default" href="https://docs.asp.net/en/latest/data/ef-mvc/intro.html">See the tutoiral
                    &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Download it</h2>
            <p>You can Download the completed project from GitHub.</p>
            <p><a class="btn btn-default" href="https://github.com/aspnet/AspNetCore.Docs/
                  tree/master/aspnetcore/data/ef-mvc/intro/samples/cu-final"> See the project source code &raquo;</a></p>        
        </div>
    
    

    Runtime Environment:
    OS Name: Windows
    OS Version: 10.0.18363
    OS Platform: Windows
    RID: win10-x64

    Thursday, February 6, 2020 12:45 PM

Answers

  • User665608656 posted

    Hi 287papa,

    By testing your code, I found that your current view uses the _Layout.cshtml file by default.

    This will make your current page also include the title and end bar in _Layout.cshtml, which will make the height in css: 50% of attributes are invalid.

    To solve this issue, I suggest you write your css code under the wwwroot\css folder, instead of overwriting the default bootstrap.css file, and then set the layout of your view page to null.

    This is the detailed content in my wwwroot file. I wrote the css content in wwwroot\css\bootstrap.css, and images are in wwwroot\images.

    html {
        font-family: sans-serif;
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    * {
        box-sizing: border-box;
    }
    
    .bg-image {
        /* Full height */
        height: 50%;
        /* Center and scale the image nicely */
        background-;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    /* Images used */
    .img1 {
        background-image: url('../images/images(1).jpg')
    }
    
    .img2 {
        background-image: url("../images/images(2).jpg");
    }
    
    .img3 {
        background-image: url("../images/images.jpg");
    }
    
    .img4 {
        background-image: url("../images/tmg-article_default_mobile.jpg");
    }
    
    article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
        display: block;
    }
    
    body {
        margin: 0;
        font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #EBEBEB;
        text-align: left;
        background-color: #2B3E50;
    }
    
    @{
        ViewData["Title"] = "Index";
        Layout = null;
    }
    <link href="~/css/bootstrap.css" rel="stylesheet" />
    
    <h1>Index</h1> <div class="bg-image img1"></div> <div class="bg-image img2"></div> <div class="bg-image img3"></div> <div class="bg-image img4"></div> <div class="col-md-4"> <h2>Welcome to Contoso University</h2> <p> Contoso University is a sample application that we will use as template to use Entity Framework Core with an ASP.NET Core MVC web application. </p> </div> <div class="col-md-4"> <h2>Build it from scratch</h2> <p>You can build the application by following the steps in a series of tutorials.</p> <p> <a class="btn btn-default" href="https://docs.asp.net/en/latest/data/ef-mvc/intro.html"> See the tutoiral &raquo; </a> </p> </div> <div class="col-md-4"> <h2>Download it</h2> <p>You can Download the completed project from GitHub.</p> <p> <a class="btn btn-default" href="https://github.com/aspnet/AspNetCore.Docs/ tree/master/aspnetcore/data/ef-mvc/intro/samples/cu-final"> See the project source code &raquo;</a> </p> </div>

    Here is the result of this demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 7, 2020 9:33 AM

All replies

  • User665608656 posted

    Hi 287papa,

    By testing your code, I found that your current view uses the _Layout.cshtml file by default.

    This will make your current page also include the title and end bar in _Layout.cshtml, which will make the height in css: 50% of attributes are invalid.

    To solve this issue, I suggest you write your css code under the wwwroot\css folder, instead of overwriting the default bootstrap.css file, and then set the layout of your view page to null.

    This is the detailed content in my wwwroot file. I wrote the css content in wwwroot\css\bootstrap.css, and images are in wwwroot\images.

    html {
        font-family: sans-serif;
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    * {
        box-sizing: border-box;
    }
    
    .bg-image {
        /* Full height */
        height: 50%;
        /* Center and scale the image nicely */
        background-;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    /* Images used */
    .img1 {
        background-image: url('../images/images(1).jpg')
    }
    
    .img2 {
        background-image: url("../images/images(2).jpg");
    }
    
    .img3 {
        background-image: url("../images/images.jpg");
    }
    
    .img4 {
        background-image: url("../images/tmg-article_default_mobile.jpg");
    }
    
    article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
        display: block;
    }
    
    body {
        margin: 0;
        font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #EBEBEB;
        text-align: left;
        background-color: #2B3E50;
    }
    
    @{
        ViewData["Title"] = "Index";
        Layout = null;
    }
    <link href="~/css/bootstrap.css" rel="stylesheet" />
    
    <h1>Index</h1> <div class="bg-image img1"></div> <div class="bg-image img2"></div> <div class="bg-image img3"></div> <div class="bg-image img4"></div> <div class="col-md-4"> <h2>Welcome to Contoso University</h2> <p> Contoso University is a sample application that we will use as template to use Entity Framework Core with an ASP.NET Core MVC web application. </p> </div> <div class="col-md-4"> <h2>Build it from scratch</h2> <p>You can build the application by following the steps in a series of tutorials.</p> <p> <a class="btn btn-default" href="https://docs.asp.net/en/latest/data/ef-mvc/intro.html"> See the tutoiral &raquo; </a> </p> </div> <div class="col-md-4"> <h2>Download it</h2> <p>You can Download the completed project from GitHub.</p> <p> <a class="btn btn-default" href="https://github.com/aspnet/AspNetCore.Docs/ tree/master/aspnetcore/data/ef-mvc/intro/samples/cu-final"> See the project source code &raquo;</a> </p> </div>

    Here is the result of this demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 7, 2020 9:33 AM
  • User-872746141 posted

    Hi YongQing,

    Thank you it works. I forgot to mention about my layout where I have a navbar with styling I was using previously from my original CSS file. I should have provided shown the code for my layout file. So your solution works except.. wait for it, now I don't have the original styling so I ended up adding all of that from my original bootstrap file to this one I was going to use for this one page. So it's all good! 

    Friday, February 7, 2020 1:15 PM
  • User-872746141 posted

    Hi,

    There was something I wanted ask you, just to understand, if you got time. So what you're saying is the code from the layout page will make the height of everything 50% because of the header and footer. And this will make other attributes invalid, yes?

    Monday, February 10, 2020 6:21 AM