Background image is not resizing as per browser size

HTML & CSS
1

I am making a login page with full background image, when I am resizing the page my background image is not resizing.

please help me how I can fix this issue, image should resize on every port,
my image size is : width: 1366px - height: 766px

below is my workings…

<div class="wrapper">
	<div class="main">
		<div class="container">
			<div class="row">
				<div class="loginCard">
					<div class="col-md-4 col-md-offset-7">
						<div class="panel panel-default">
								<div class="panel-heading">
								<span class="glyphicon glyphicon-lock"></span> Login</div>
							<div class="panel-body">
								<form class="form-horizontal" role="form">
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">
										Email</label>
									<div class="col-sm-9">
										<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
									</div>
								</div>
								<div class="form-group">
									<label for="inputPassword3" class="col-sm-3 control-label">
										Password</label>
									<div class="col-sm-9">
										<input type="password" class="form-control" id="inputPassword3" placeholder="Password" required>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-3 col-sm-9">
										<div class="checkbox">
											<label>
												<input type="checkbox"/>
												Remember me
											</label>
										</div>
									</div>
								</div>
								<div class="form-group last">
									<div class="col-sm-offset-3 col-sm-9">
										<button type="submit" class="btn btn-success btn-sm">
											Sign in</button>
											 <button type="reset" class="btn btn-default btn-sm">
											Reset</button>
									</div>
								</div>
								</form>
							</div>
						</div>
					</div>
				</div>
		 
			</div>

		</div>
	</div>
</div>

CSS:
body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 14px;
		line-height: 1.428571429;
		color: #333333;
		background-color: #ffffff;
        }
		
	.main {
		background-position: center center;
		background-image: url("images/Login_BG1.jpg");
		background-size: cover;
		height: auto;
		left: 0;
		min-height: 100%;
		min-width: 100%;
		position: absolute;
		top: 0;
		width: auto;
	}
	
	.loginCard{
		margin-top:25%;
	}
2

Hi there shahzadsiddiqui8,

here is a basic example…

https://codepen.io/coothead/full/xxGVQVO

…and here is it’s code…

https://codepen.io/coothead/pen/xxGVQVO

coothead

3

Do you want the image to cover the whole viewport at all times or just the login form?

At present your code will spread the image over the content that you are using (looking at the snippet you posted). Although you seem to have removed the whole page from the flow using absolute positioning so is not really the way to do it.

If you just want a viewport sized image then I would place it in a fixed positioned element that fills the viewport. I recommend the following method as it overcomes a bug in ios and other mobiles.

Note that the height:100% will clip the image to 100% viewport height only and should content in that element (if any) be greater than 100% then the content will have no background. I would suggest a min-height:100vh instead :wink: (I realise you probably knew this anyway and were just showing how to make the image scale).

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.