Background Image is not reducing as per mobile View Port

HTML & CSS
,
1

I am using 2 images 1 is for my Logo and 2nd is for my Login Form, my Logo is reducing properly when I reduce me browser size, but my 2nd image which is background image is not reducing the size as per window size I am giving height:100%, min-height:576px; width:100%, it is working properly in Desktop mode, but having issue in Mobile View, or tablet view.

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
      <title>Dashboard vTM</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
          <meta name="author" content="">
            <!-- CSS -->
				<link href="assets/css/bootstrap3.2.0.css" rel="stylesheet">
                <link href="assets/css/customStyle.css" rel="stylesheet">
				<link href="assets/css/bootstrap-datetimepicker.css" rel="stylesheet">
                      <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
                      <!--[if lt IE 9]>
						  <script src="../assets/js/html5shiv.js"></script>
					  <![endif]-->
				<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
				<script type="text/javascript" src="assets/js/bootstrap.js"></script>

<style>
body, html {
	height: 100%;
}
.outerContainer {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	overflow:auto;
	margin:0;
	padding:0;
	background: #666;
}
.wrap {
	display:table;
	width:100%;
	height:100%;
}
.inner {
	display:table-cell;
	width:100%;
	height:100%;
	vertical-align:middle;
}
.innerContainer {
	/*background: url("assets/images/Login_bg.png") no-repeat center;
	width:472px;
	height:546px;*/
	margin: 0 auto;
}
.btn {
	font-weight: 700;
	height: 36px;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: default;
}

.profile-img-card {
	width: 96px;
	height: 96px;
	margin: 0 auto;
	display: block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.techmLogo-img {
    display: block;
    height: 434px;
    margin: 0 auto;
    width: 375px;
}


.techMLogoContainer{
margin: 0 auto;
}

.techMLogoContainer img{
width:100%;
max-width: 375px;
height:100%;
text-align:right;
float:right;
}

.techMLogoContainer1{
	width: 100%;
	height:100%;
	min-height:576px;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
    background-image: url("assets/images/Login.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

@media only screen and (min-width : 768px) {
	.innerContainer {
		width:100%;
		padding: 20px 20px;
	}
	
	.techMLogoContainer1{
		background: url("assets/images/Login.png") no-repeat center;
	}

}

@media only screen and ( max-width: 62.5em ) /* 1000 */
		{
			
			.techMLogoContainer img{
			float:none !important;
			}
			.techMLogoContainer1 img{
			float:none !important;
			}
			
			.techMLogoContainer1{
				background: url("assets/images/Login_bg.png") no-repeat center;
			}
		}
		
		

</style>							
  <script type="text/javascript" language="javascript">
	$( document ).ready(function() {
   
});
  </script>  
				
  </head>
  <body>
  <div id="wrap">
	<div class="outerContainer">
	  <div class="wrap">
		<div class="inner">
			<!--<div class="col-sm-12 col-md-2 col-lg-2">&nbsp;</div>-->
				<!--<div class="col-sm-12 col-md-4 col-lg-5 column30">
					<img id="" class="techmLogo-img" src="assets/images/logo.png" />
				</div>-->
					<div class="innerContainer"> 
						<div class=" col-sm-12 col-md-12 col-lg-12 techMLogoContainer">
							<div class="col-sm-12 col-md-12 col-lg-1">&nbsp;</div>
							<div class=" col-sm-12 col-md-12 col-lg-5 techMLogoContainer">
								<img id="" class="techmLogo-img" src="assets/images/Login_logo.png" />
							</div>
							<div class=" col-sm-12 col-md-12 col-lg-5">
								<div class="techMLogoContainer1"></div>
							</div>
							<div class="col-sm-12 col-md-12 col-lg-1">&nbsp;</div>	
						</div>		
					</div>
		  </div>
		<!-- /inner --> 
		</div>
	  <!-- end wrap --> 
	</div>
	<div class="push"></div>
</div>	
	<!-- /container -->
   <footer class="footer">
        <p class="text-muted">@copyright/p>
    </footer>
  </body>
</html>
2

Hi there @shahzadsiddiqui8 you need to format your code so peeps can see it. Three backticks before and 3 backticks after…

1 Like
3

Done

1 Like
4

Can you explain which of your images isn’t performing as expected @shahzadsiddiqui8. I’m sure someone quicker than me would find it, but it might help if you explained.

I notice you assign the class col-sm-12 twice to several divs. This probably isn’t a problem but it’s a bit sloppy.

You are also missing a < in the line <p class="text-muted">@copyright/p>

5

I’m guessing its the image in the element called .techMLogoContainer1.

If so then you won’t be able to make a background image scale at the same rate as a foreground image unless the image is applied to an element of the same dimensions as the image which in your case is not true because your element has a min-height of 576px (note you should remove the height:100% and never use it again unless I say so as it is doing nothing there :)).

If you want the logo and another image to behave in the same way then do the same approach for both :slight_smile:

It would also help if you have a link to the live page or at least supplied absolute urls for the images in your page so we can see a working demo.

3 Likes
6

Thanks for your reply,

“If you want the logo and another image to behave in the same way then do the same approach for both :slight_smile:”

I am using for 2 images for 1st image i m using tag which is working properly, but for 2nd image i am using background image which I am putting in CSS that image is not working properly.

7

Then don’t use a background image. You can’t have a background image resize to the same as some other unrelated foreground image unless the element is the same size as the image.

I’d need to see the whole page to get the full picture:). I can’t really visualise how this is supposed to work.

You will need to post a working demo including the two images your are talking about in place.

8

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