Carousel bootstrap en fond d'écran
Bonjour à tous,
j'ai placé un carousel (bootstrap) en fond d'écran dans ma page de login, mais les images s'affichent en petit alors que je voudrais que les images soient redimensionnées dynamiquement pour occuper tout l'écran.
pour le moment, seul le carousel est bien agrandi, mais les images gardent leur taille et j'ai une bordure bleu sombre sur les cotés ...
ci-dessous mon fichier aspx :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
| <%@ Page Title="Login" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="seb.Login" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$("#myCarousel").carousel(
{
interval: 5000,
pause: false
});
});
</script>
<style type="text/css">
.carousel{
background: #2f4357;
margin-top: 20px;
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
}
.bs-example{
margin: 20px;
}
</style>
<span z-index:100 style="position:absolute; top:0px; left:0px; width:100%">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="../images/Caroussel_01.jpg">
</div>
<div class="item">
<img src="../images/Caroussel_02.jpg">
</div>
<div class="item">
<img src="../images/Caroussel_03.jpg">
</div>
</div>
</div>
</span>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm col-md-1 col-lg-2">
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<H1><asp:Label ID="lbl_title" runat="server" Text="lbl_title" Font-Bold="True" ForeColor="White"/></H1>
<p><asp:Label ID="lbl_title_detail" runat="server" Text="lbl_title_detail" ForeColor="White" /></p>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-lg-1">
</div>
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-3">
<div class="well">
<p>
<asp:Label ID="lbl_login_title" runat="server" Text="lbl_login_title" Font-Bold="True" />
<br />
<asp:Label ID="lbl_login_title_detail" runat="server" Text="lbl_login_title_detail" />
</p>
<asp:PlaceHolder ID="zone_notification" runat="server" />
<div role="form">
<div class="form-group">
<asp:Label ID="lbl_login_user" AssociatedControlID="txt_login_user" Text="lbl_login_user" runat="server" />
<asp:TextBox ID="txt_login_user" runat="server" CssClass="form-control" />
</div>
<div class="form-group">
<asp:Label ID="lbl_login_pwd" AssociatedControlID="txt_login_pwd" Text="lbl_login_pwd" runat="server" />
<asp:TextBox ID="txt_login_pwd" runat="server" CssClass="form-control" TextMode="Password" />
</div>
<p><asp:CheckBox ID="chk_login_rememberMe" runat="server" Text="chk_login_rememberMe"/></p>
<p><asp:LinkButton ID="bt_login" runat="server" CssClass="btn btn-primary" Width="100%" OnClick="bt_login_Click">bt_login</asp:LinkButton></p>
<p><asp:LinkButton ID="bt_lost_pwd" runat="server" CssClass="btn btn-primary" Width="100%" OnClick="bt_lost_pwd_Click">bt_lost_pwd</asp:LinkButton></p>
</div>
</div>
<div class="well">
<p>
<asp:Label ID="lbl_register_title" runat="server" Text="lbl_register_title" Font-Bold="True" />
<br />
<asp:Label ID="lbl_register_title_detail" runat="server" Text="lbl_register_title_detail" />
</p>
<div role="form">
<p><asp:LinkButton ID="bt_register" runat="server" CssClass="btn btn-primary" Width="100%" OnClick="bt_login_Click">bt_register</asp:LinkButton></p>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-1 col-lg-2">
</div>
</div>
</div>
</asp:Content> |
Merci de vos lumières
