The alignment of the background images is off

I am attempting to give a container a background image and then create two div tags using the col-md-6 classes from Bootstrap. The main div's background image is of grass texture, while the two inner divs have a skeleton of a football court as their background image. I'm splitting the image in half for each div, but after transforming one by 180 degrees it's not displaying as expected. It seems like something might be 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>

https://i.stack.imgur.com/NCOz1.png

htmlcss

Answer №1

Here is an example of how you can format your code:

.left-side {
     background-image: url(./garden.jpg);
     background-size: cover;
     height: 600px;
    -webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

Answer №2

Make sure to double-check the dimensions of your images, as they need to match perfectly. In this example, I have used two images with identical dimensions, resulting in a seamless alignment.

.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>

Answer №3

It's not recommended to use the bootstrap row class with any other classes, as it can lead to styling conflicts. Instead, consider adding your own custom class below the row class. To align images perfectly, you can modify your HTML code as shown below:

<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>

Answer №4

I simply added a picture in place of your code without making any changes. The picture fits perfectly, but you might want to verify the dimensions of court.png.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for assigning a class to a div based on the route in Angular

In my angular template, I have a basic ng-repeat with some div elements. Now, I am looking to add a class to a specific div if the $routeParams.userId matches the id of the object in the loop. You can refer to the second line of code below for clarificatio ...

javascripthtmlcssangularjstemplates

Create dynamic and interactive content by embedding text within SVG shapes using the powerful D

How can I write text into an SVG shape created with d3.js and limit it to stay inside the shape similar to this example http://bl.ocks.org/mbostock/4063582? I attempted to use a clipPath following the example provided. However, when inspecting with firebu ...

javascripthtmld3.jssvg

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

csstwitter-bootstrap

The chosen color for the link button in CSS

PHP CODE : $getOID=$_GET["id"]; for($i=$getOID-($getOID-1); $i<=5;$i++){ echo '<a class="current" href="postlogin.php?id='.$i.'">'.$i.'</a>'; } CSS STYLING FOR BUTTONS : .pagging { height:20px; ...

cssbuttonhyperlinkselected

How can we align divs in the center horizontally inside a parent div?

This question has been asked many times, but I can't seem to figure it out in my situation as I am new to HTML. I have three divs (boxes: QM, Audit, PM) and I want to center them within a parent div called Services. In the photo provided, you can see ...

htmlcss

What is the best method for incorporating meta data, titles, and other information at dynamic pages using Node.js and Express?

I am currently exploring methods to efficiently pass data to the html head of my project. I require a custom title, meta description, and other elements for each page within my website. Upon initial thought, one method that comes to mind is passing the da ...

javascripthtmlnode.jsexpress

Troubleshooting a Node.js server issue with a two-dimensional array

I am currently facing an issue with submitting a form that contains two-dimensional array fields on a post request in node.js. The problem lies in the fact that the server side is receiving a one-dimensional array with all the values combined. Below is an ...

javascripthtmlarraysnode.js

Searching for a post by content or title on Flask can be done by utilizing the search functionality built

I've created routes and forms, but when I tried to search, it showed "cannot be found." Here is my code: routes.py: @app.route('/search',methods=['GET','POST']) def posts_lists(): q = request.args.get('q') ...

pythonhtmlflask

Activate a CSS button upon clicking and update the content within the div

In order to achieve the desired result of having menu CSS buttons change the content of a div when clicked, I have managed to do that successfully. However, a problem arises when clicking on the 2nd or 3rd button/link - it changes the div content, but as s ...

htmlcss

How does Angular5 perform with Bootstrap4?

Currently working on an Angular5 application and considering integrating bootstrap into it. I imported Bootstrap4, which includes dependencies on JQuery and Popper.js. Another option I came across is utilizing CSS grid for more versatility compared to boo ...

jqueryhtmlcsstwitter-bootstrapcss-grid

Conceal the Angular Bootstrap modal instead of shutting it down

I am utilizing Angular Bootstrap Modal to launch multiple modals, including a video player. http://angular-ui.github.io/bootstrap/#/modal My goal is to maintain the video's current position even when the modal is closed. This way, when I reopen the ...

javascriptcssangularjstwitter-bootstrap

Ensure tables are vertically centered when printing an HTML page

I need to export two tables, each measuring 7cm×15cm, to a PDF file with A4 portrait paper size using the browser's "Save to PDF" option in the print tool. My goal is to center these two tables vertically on the A4 paper. If that proves difficult, I ...

htmlcssprinting

Personalized element IDs and unique CSS styles

After editing the code snippet below... <div id="rt-utility"><div class="rt-block fp-roksprocket-grids-utility title5 jmoddiv"> I applied the changes in my custom.css file like this: #rt-utility .rt-block {CODE HERE} However, when attemptin ...

css

Ways to avoid losing data when a page is refreshed

After encountering a frustrating issue with my form, I turned to research in hopes of finding a solution. However, each attempt has resulted in disappointment as the data is lost every time the page is refreshed. If anyone has advice on how to prevent th ...

javascriptphpjqueryhtmlajax

Changing the size of an iframe and closing it by pressing the ESC

I am developing an application that requires the ability to resize an iframe. When the user clicks the "Full Screen" button, the iframe should expand to occupy the entire screen. The iframe should return to its original size when the user presses the "Es ...

javascriptjqueryhtml

React Native - Scaling images dynamically

I have a responsive photo grid built within a mobile app. I want to display three images across the screen with equal spacing between them. All the images are squares. Unfortunately, using percentages for each image's width and height is not possible ...

cssreactjsreact-nativeflexbox

JavaScript Function Not Executed in Bottom Section

I've implemented AngularJS includes in my project. Below is the code snippet from my index.html: <!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> ...

javascriptjqueryhtmlcssangularjs

On the second attempt, Firefox is able to drag the div element smoothly by itself

I have created a slider resembling volume controls for players using jQuery. However, I am facing an issue ONLY IN FIREFOX. When I drag the slider for the second time, the browser itself drags the div as if dragging images. The problem disappears if I clic ...

javascriptjqueryhtmlcss

Adjust the background shade of specific characters within an input text field

When a user inputs a string into a standard HTML input field (type="text"), such as "2013/13/29", and validation reveals that the number 13 is invalid in this context, I would like to visually highlight it by changing its background color to red while tu ...

cssregexbackground-colorhtml

Can <p> be utilized without creating empty space at the top or bottom?

Is there a way to use paragraph breaks without any space at the top or bottom when there's no text above or below it? body { font-family:arial; background:#222; } #wrapper { width:100%; margin-top:100px; } .post_container { ba ...

htmlcss