background images is not aligning properly
Question
So what I am trying to do is first giving a container a background image and then creating two div tag using col-md-6 of bootstrap. background image of main div is just grass texture. In the two div tag I am giving a background image of skeleton of football court. So I am taking one half giving it to one div and then taking the same image transforming 180. But it's not coming as expected. Don't know what going wrong here.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title></title>
<style type="text/css">
.height{
width: 100%;
min-height: 100vh;
background-image: url(./turf2.jpg);
}
.left{
background-image: url(./court.png);
background-size: 100% 100%;
height: 768px;
}
.right{
background-image: url(./court.png);
background-size: 100% 100%;
height: 768px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="row height">
<div class="col-md-6 left">
</div>
<div class="col-md-6 right">
</div>
</div>
</body>
</html>
4 answers
solution1
0
You can write as
.right {
background-image: url(./court.png);
background-size: 100% 100%;
height: 768px;
-webkit-transform:scaleX(-1);
-moz-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
solution2
0 2016-08-12 05:07:59
Check your image dimensions again to make sure they match. See here that I have used two images with the same dimensions and they align perfectly.
.height { width: 100%; min-height: 100vh; background-image: url(./turf2.jpg); } .left { height: 200px; background-image: url('http://placehold.it/200x200'); background-size: 100% 100%; } .right { height: 200px; background-image: url('http://placehold.it/200x200'); background-size: 100% 100%; transform: rotate(180deg); }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="row height"> <div class="col-xs-6 col-md-6 left"> </div> <div class="col-xs-6 col-md-6 right"> </div> </div> </body> </html>
solution3
0 2016-08-12 05:34:51
I didn't changed your code, just replace by a simple picture. It works well, maybe you should check dimensions of court.png file.
solution4
0 2016-08-12 05:56:40
First its a very bad practice to use bootstrap row class with any other class, instead you should add your class below the row class. Here's a way you can get the images align perfectly, just change the html part of your code to following.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="height">
<div class="col-md-6 left">
</div>
<div class="col-md-6 right">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.