0

I have 3 opt-in pages for separate events. Each needing a different background. I am using blazor c# so I have one main site.css file which contains the body then the rest of the pages get rendered like components.

So if I set my CSS body to have the background it fills the entire page, obviously. But how can I make the div which my cshtml is encapsulated in and make it fill the entire screen? Here is what I have and it's not working properly:

body {
    background-color: #202020;
    background-repeat: no-repeat;
    background-size: cover;
}
#pagewrapperevent1 {
    background-image: url('http://i.e.eastbay.com/wpm/100233/WebForms/EB_Event_Signup_1/FL_form-engraved_background.jpg '); 
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0;
}
#pagewrapperevent2 {
    background-image: url('http://www.lyhyxx.com/data/out/38/4085425-athletics-wallpapers.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0;
}

Note that all 3 of these elements are in separate .cshtml files. Each element is a div that contains all my content.

Here is my index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <title>EastbayEvents</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>Loading...</app>

    <script type="blazor-boot"></script>
</body>
</html>

page1.cshtml

<div id="pagewrapperevent1">
//removed for brevity
</div>
Bluestreak22
  • 144
  • 1
  • 11
  • 1
    I take it those ids are on the body, if so, then just add `html { height:100%; }` – Pete May 22 '18 at 15:03
  • the id's are on so i have and inside the body depending on the route loads a html file which contains the div with those ids – Bluestreak22 May 22 '18 at 15:05
  • ok then add `body, html { height:100%; }`. this is why you should create a [mcve] – Pete May 22 '18 at 15:06
  • This does not work here is an image http://my.jetscreenshot.com/demo/20180522-040a-146kb I will post my code up top – Bluestreak22 May 22 '18 at 15:09
  • Because you are wanting the div to fill the page and as you have not made an [mcve] like we have asked for then this looks like a height 100% issue, and if you read the answers in the dupes properly it will solve your problem – Pete May 22 '18 at 15:27
  • Well ill be damned youre right – Bluestreak22 May 22 '18 at 16:37

0 Answers0