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

The alignment of buttons is not defined for ASP buttons and Bootstrap dropdowns

I'm having an issue with the placement of my ASP button and button dropdown list. The dropdown always appears below the other buttons, but I want it to be in the same row as the other buttons. Below is a screenshot showing the current layout of the b ...

c#cssasp.nettwitter-bootstrap

Store the ID of a div in a variable

Currently, I have transformed rock paper scissors from a terminal/console game using prompts and alerts to something playable in a web browser through the use of the jQuery library. In order to achieve this transition, I created images for each hand - roc ...

javascriptjqueryhtml

Tips for creating a dynamic header background using custom CSS for my website design

As I embark on creating my very first WordPress website using the Blossom Pin Pro theme, I'm encountering an issue where the background image of the header disappears when adjusting the window width. Click here to visit the site If you have a code s ...

csswordpress

When using the onclick function, an unexpected behavior occurs where instead of displaying content, the page

Below is a summarized version of my code: HTML <a onclick="showHideDiv('bio')" target='_self'> bio <div id="bio" class="shadowScreen" style="display: none;"> <p class="showBio"> Bio! </p> &l ...

javascripthtmlcssonclickrefresh

Removing the navigation button from the hamburger menu

I am working on creating a semi-progressive top navigation bar. For the mobile viewport, the navigation bar will only display the logo and a hamburger button. When the button is clicked, various navigation menu options as well as the Log In and Sign Up bu ...

javascripthtmlcss

Ensure the table row remains on one page when printing or viewing the print preview

I'm currently dealing with an html report that contains a table, which can be seen here http://jsfiddle.net/fhwoo3rg/2/embedded/result/ The issue arises when trying to print the report, as it breaks in the middle of a table row like this: I've ...

htmlcsshtml-table

Filtering dynamically generated table rows using Jquery

I'm currently working on a project that involves filtering a dynamic table based on user input in a search bar. The table contains information such as name, surname, phone, and address of users. Using jQuery, I have created a form that dynamically ad ...

javascriptjqueryhtml

Is there a way to automatically transfer the ID from the first table to the id_position field in the second table upon clicking submit?

I'm dealing with two tables and I need to figure out how to add the id of the first table to the position_id field of the second table upon submitting. My request is done through ajax. The fields for the second table are dynamic, meaning you can keep ...

phphtmlajaxpdo

What is the best way to choose the final XHTML <span> tag with a specific class using XPath?

My target XHTML document structure is as follows: <html> <head> </head> <body> <span class="boris"> </span> <span class="boris"> </span> <span class="johnson"> </span> </body> </html> ...

htmlxmlxhtmlxpath

Strategies for patiently waiting for an object to appear before loading the HTML

After logging into my service, I download data from a REST API, and based on that data, I display certain tabs. However, I am experiencing issues with loading the HTML content once the data has been retrieved. The ngif directive at the beginning of the H ...

htmlangulartypescript

How can I align the middle of the element within its parent until it hits the top-left edge, at which point should I stop center

I am trying to center an element within a parent container. It seems simple with methods like transform, flexbox, and grid... The issue arises with overflow behavior. When the parent container shrinks below the dimensions of the child element, scrollbars a ...

htmlcssscrollbaroverflowcentering

Issues of horizontal spaces in HTML emails

We have been facing an ongoing issue with the layout of our email communications. Upon rendering in Outlook, the emails are displaying additional horizontal gaps/spaces. However, the web version of the email appears to be fine. It's unclear to us the ...

htmlcssemailoutlookhtml-email

Encountering a problem within a Maven project during execution

Greetings, I am relatively new to maven and seeking some assistance. Recently, my Maven project has started displaying a 404 error on the browser when I attempt to run it. I initially created this Maven project using the webapp archetype and everything w ...

htmleclipsemaventomcat7

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

javascripthtmlcssgsapscrolltrigger

Mastering the art of column stacking with CSS on your WordPress website

Looking for a CSS solution to adjust the layout when the screen resolution is lowered. Currently, I have two rows with three columns in each row, containing blurbs. My goal is to make these two rows convert into three rows with two columns each at a cert ...

csswordpress

Transitioning classes in Vue elements

Is it achievable to create a smooth transition between two CSS classes with different background images? That's the challenge I'm currently facing. Here is the Vue code snippet I am working on: <div id="flip-list-demo" class="demo"> & ...

javascriptcssvue.jstransition

Can you explain the purpose of the behavior: url(); property in CSS?

While browsing the web, I came across a CSS property that caught my eye. It's called behavior, and it looks like this: #element{ behavior: url(something.htc); } I've never used or seen this property before. It seems to be related to Internet ...

cssinternet-explorer

Div I add to page is not being styled by CSS

I'm currently developing a Chrome extension that provides a preview of a webpage when hovering over a hyperlink to it. To achieve this, I am creating a div and filling it with different items. However, the issue I'm facing is that the CSS styles ...

htmlcssgoogle-chromegoogle-chrome-extensionstylesheet

Top-notch java tool for caching and minifying dojo, jquery JavaScript, and CSS files

In our project, we have downloaded the Dojo and jQuery libraries from Google CDNs. I am currently seeking a Java tool that can both cache and minify these libraries. The caching process should take place within the ROOT project of Tomcat. While I am awar ...

javajavascriptcsscachingminify

Update the HTML weather icon with data from JSON

I have a collection of weather icons stored on my computer. How can I customize the default weather icons with my own set of icons? In the JSON file, there is a variable like this: "icon":"partlycloudy" <html> <head> <script src="http://c ...

javascriptjqueryhtmljson