locked
Need Your Help Please RRS feed

  • Question

  • User-527908287 posted
    The image inside my jumbotron is not showing fully when the window is minimized; it is showing part of the whole image. How can I make the image in my jumbotron to be responsive when the window is minimized? Please help me out

    Below is the code I used:
    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Dox Home</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/StyleSheet.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png')">
    <form id="form1" runat="server">
    <div>
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="Homepage.aspx"></a>
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
    <li><a href="Homepage.aspx" style="color:#FFFFFF;">Home</a></li>
    <li><a href="#" style="color:#FFFFFF;">About Us</a></li>
    <li><a href="#" style="color:#FFFFFF;">Contact</a></li>
    <li><a href="SignIn.aspx" style="color:#FFFFFF;">Register/Login</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <div class="jumbotron" style="margin-top:15px; height:20px; border:10px #ccc; box-shadow:4px 8px 10px #ccc; background-color:#A9A9A9; font-family:Nunito; height:200px;">
    <div class="container">
    <h1 style="color:#200662; margin-top:2px; font-size:xx-large">Doxtrak</h1>
    <p>
    <i style="color:black; font-size:large; font-style:normal">Making the World Revolve at Your Fingertips</i></p>
    </div>
    </div>
    <div class="jumbotron" style="margin-top: -3%; background-image: url('img/Toyota-2016-Lineup.png'); height: 350px; background-size: cover; ">

    </div>
    </form>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    Friday, March 22, 2019 4:56 AM

All replies

  • User839733648 posted

    Hi Donald416,

    <div class="jumbotron" style="margin-top: -3%; background-image: url('img/Toyota-2016-Lineup.png'); height: 350px; background-size: cover; ">

    According to your description and code, I think the key point is the background-size in the jumbotron.

    You could set the size as you want like below.

    If you would like the background image to fit the height of your jumbotron, but don't care about if it stretches to the entire width:

    background-size: auto 100%;

    If you want the background image to cover the entire height and width of the jumbotron and you do not care about the image's aspect ratio:

    background-size: 100% 100%

    If you want the background image to be cover the entire height and width the jumbotron but you DOcare about the image's aspect ratio:

    background-size: cover;

    Best Regrads,

    Jenifer

    Friday, March 22, 2019 8:45 AM
  • User-527908287 posted
    Hello Jennifer,

    Thank you. You have been of great help to me. It’s working well. May I please ask that you help me on a few other things. How can I add a vertical line to separate the login and sign up? And when the window is minimized the line will disappear or appear as horizontal between the login and sign up. Also the buttons for login and sign up appear not to align well with the textboxes.

    There are three more issues i am looking to resolve: there are:

    how do I make the background of "sign up" be a bit darker than the login, still on the same page?
    Is there a way to make a textbox disappear when clicking on a button to display information required?
    I need a message box to appear when inserting information; the messagebox should should give me options to choose from(between going back to previous webpage or going on to the next page).

    CODE:
    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Joscheck Login</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/StyleSheet.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body style="background-color: #DCDCDC; background-image: url('images/Dox.png'); overflow-x: hidden;">
    <form id="form1" runat="server">
    <div>
    <div class=" navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #200662; font-family: Nunito;">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: #200662; font-family: Nunito;">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="Homepage.aspx"><span>
    <img alt="Logo" src="images/Un.png" height="40" width="90" /></span></a>
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
    <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
    <li><a href="About.aspx" style="color: #FFFFFF">About Us</a></li>
    <li><a href="#" style="color: #FFFFFF">Contact</a></li>
    <li><a href="SignIn.aspx" style="color: #FFFFFF">Login</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>

    <div class="container">
    <h1 style="color: #200662; margin-top: 80px; font-family: Nunito; font-size: xx-large">JosCheck Login</h1>
    <p>
    <i style="color: black; font-family: Co Headline Corp; font-size: large; font-style: normal">You Must Login to Have Access to Our Services</i>
    </p>
    <hr />
    </div>
    <br />
    <br />
    <!--login start-->

    <div class="container">
    <div class="form-horizontal col-md-6">
    <div class="form-group">
    <div class="col-xs-11">
    <asp:Label ID="Label1" runat="server" CssClass="col-md-2 control-label" Text="Username"></asp:Label>
    <div class="col-md-3">
    <asp:TextBox ID="Username" CssClass="form-control" Width="300px" runat="server" placeholder="Username"></asp:TextBox>
    </div>
    </div>
    </div>

    <div class="form-group">
    <div class="col-xs-11">
    <asp:Label ID="Label2" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label>
    <div class="col-md-3">
    <asp:TextBox ID="Password" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
    </div>
    </div>
    </div>
    <div class="form-group">
    <div class="col-md-2"></div>
    <div class="col-md-6">
    <asp:Label ID="Label4" runat="server"></asp:Label>
    </div>
    </div>

    <div class="form-group">
    <div class="col-md-2"></div>
    <div class="col-md-6">
    <asp:Button ID="Button1" runat="server" Width="300" Text="Login" Class="btn btn-success" />
    </div>
    </div>
    <div class="form-group">
    <div class="col-md-2"></div>
    <div class="col-md-6">
    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Signup.aspx" Font-Names="Co Headline Corp" ForeColor="Red" Font-Bold="True">Don&#39;t Have an Account? Sign Up Now</asp:HyperLink>
    </div>
    </div>
    </div>
    <div class="container">
    <div class="form-horizontal col-md-6">
    <div class="form-group">
    <div class="col-xs-11">
    <asp:Label ID="Label3" runat="server" CssClass="col-md-2 control-label" Text="E-mail"></asp:Label>
    <div class="col-md-3">
    <asp:TextBox ID="TextBox1" CssClass="form-control" Width="300px" runat="server" placeholder="Email Address"></asp:TextBox>
    </div>
    </div>
    </div>

    <div class="form-group">
    <div class="col-xs-11">
    <asp:Label ID="Label5" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Username"></asp:Label>
    <div class="col-md-3">
    <asp:TextBox ID="TextBox2" CssClass="form-control" Width="300px" runat="server" placeholder="Choose Username"></asp:TextBox>
    </div>
    </div>
    </div>
    <div class="form-group">
    <div class="col-xs-11">
    <asp:Label ID="Label6" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label>
    <div class="col-md-3">
    <asp:TextBox ID="TextBox3" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
    </div>
    </div>
    </div>
    <div class="form-group">
    <div class="col-md-2"></div>
    <div class="col-md-6">
    <asp:Button ID="Button2" runat="server" Width="300" Text="Sign Up" Class="btn btn-success" />
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>


    <footer class="container navbar-fixed-bottom" style="background-color: black; margin-top: 20%; width: 100%;">
    <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p>
    <p style="color: white;">Copyright &copy; 2018 Doxtrak Tech. All Rights Reserved. &middot; <a href="Homepage.aspx">Home</a> &middot; <a href="#">About Us</a> &middot; <a href="#">Contact</a> &middot</p>
    </footer>
    </form>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>
    Friday, March 22, 2019 10:16 AM
  • User839733648 posted

    Hi Donald416,

    The key point to add a vertical line to separate the login and sign up is to add styles to the grid class.

    Here is the testing code.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BootstrapJumbotron2.aspx.cs" Inherits="WebApplicationForm.BootstrapJumbotron2" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Dox Home</title>
    
        <!-- Bootstrap -->
        <link href="References/bootstrap.min.css" rel="stylesheet" />
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
        <style>
            @media(min-width: 992px) {
                .col-md-6:not(:first-child) {
                    border-left: 1px solid black;
                }
    
                .col-md-6:not(:last-child) {
                    border-right: 1px solid black;
                    margin-right: -1px;
                }
            }
        </style>
    </head>
    <body style="background-color: #DCDCDC; background-image: url('images/Dox.png'); overflow-x: hidden;">
        <form id="form1" runat="server">
            <div>
                <div class=" navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #200662; font-family: Nunito;">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: #200662; font-family: Nunito;">
                                <span class="sr-only">Toggle Navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="Homepage.aspx"><span>
                                <img alt="Logo" src="images/Un.png" height="40" width="90" /></span></a>
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="Homepage.aspx" style="color: #FFFFFF">Home</a></li>
                                <li><a href="About.aspx" style="color: #FFFFFF">About Us</a></li>
                                <li><a href="#" style="color: #FFFFFF">Contact</a></li>
                                <li><a href="SignIn.aspx" style="color: #FFFFFF">Login</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="container">
                <h1 style="color: #200662; margin-top: 80px; font-family: Nunito; font-size: xx-large">JosCheck Login</h1>
                <p>
                    <i style="color: black; font-family: Co Headline Corp; font-size: large; font-style: normal">You Must Login to Have Access to Our Services</i>
                </p>
                <hr />
            </div>
            <br />
            <br />
    
            <div class="container">
                <div class="form-horizontal col-md-6">
                    <div class="form-group">
                        <div class="col-xs-11">
                            <asp:Label ID="Label1" runat="server" CssClass="col-md-2 control-label" Text="Username"></asp:Label>
                            <div class="col-md-3">
                                <asp:TextBox ID="Username" CssClass="form-control" Width="300px" runat="server" placeholder="Username"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-11">
                            <asp:Label ID="Label2" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label>
                            <div class="col-md-3">
                                <asp:TextBox ID="Password" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2"></div>
                        <div class="col-md-7">
                            <asp:Label ID="Label4" runat="server"></asp:Label>
                        </div>
                    </div>
    
                    <div class="form-group">
                        <div class="col-md-2"></div>
                        <div class="col-md-7">
                            <asp:Button ID="Button1" runat="server" Width="300" Text="Login" Class="btn btn-success" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2"></div>
                        <div class="col-md-7">
                            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Signup.aspx" Font-Names="Co Headline Corp" ForeColor="Red" Font-Bold="True">Don&#39;t Have an Account? Sign Up Now</asp:HyperLink>
                        </div>
                    </div>
                </div>
    
                <div class="form-horizontal col-md-6">
                    <div class="form-group">
                        <div class="col-xs-11">
                            <asp:Label ID="Label3" runat="server" CssClass="col-md-2 control-label" Text="E-mail"></asp:Label>
                            <div class="col-md-3">
                                <asp:TextBox ID="TextBox1" CssClass="form-control" Width="300px" runat="server" placeholder="Email Address"></asp:TextBox>
                            </div>
                        </div>
                    </div>
    
                    <div class="form-group">
                        <div class="col-xs-11">
                            <asp:Label ID="Label5" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Username"></asp:Label>
                            <div class="col-md-3">
                                <asp:TextBox ID="TextBox2" CssClass="form-control" Width="300px" runat="server" placeholder="Choose Username"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-11">
                            <asp:Label ID="Label6" runat="server" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label>
                            <div class="col-md-3">
                                <asp:TextBox ID="TextBox3" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2"></div>
                        <div class="col-md-7">
                            <asp:Button ID="Button2" runat="server" Width="300" Text="Sign Up" Class="btn btn-success" />
                        </div>
                    </div>
                </div>
            </div>
    
            <footer class="container navbar-fixed-bottom" style="background-color: black; margin-top: 20%; width: 100%;">
                <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p>
                <p style="color: white;">Copyright &copy; 2018 Doxtrak Tech. All Rights Reserved. &middot; <a href="Homepage.aspx">Home</a> &middot; <a href="#">About Us</a> &middot; <a href="#">Contact</a> &middot</p>
            </footer>
        </form>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="References/bootstrap.min.js"></script>
    </body>
    </html>
    
    

    result:

    Besides, if you have any other issue not related to this thread's topic, I suggest that you could write another new thread.

    This will emphasize different issues and will be helpful to those meet with the similar issue in this community.

    Best Regards,

    Jenifer

    Monday, March 25, 2019 8:55 AM