Ensure that the two background images are identical in size and content

Can someone assist me with achieving vertical equality for two background images like in this example image?

Currently, I have the following styling applied:

background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 925px center;

However, the image equality is only maintained when viewed on a specific viewport. When I exit the inspect tool, it messes up and resizes them.

I've attempted using calc() and experimenting with different background-positions but haven't found a solution yet.

If anyone has any advice or suggestions, it would be greatly appreciated.

cssimageimage-scaling

Answer №1

This solution seems to be the key. By setting the first background image on the body element, it ensures that there won't be a visible white line in the center when the width is an odd number of pixels.

*{
  margin:0;
  padding:0;
}
body{
   background: url(https://www.example.com/image.jpg);
   overflow-x: hidden;
}
#right{
   background: url(https://www.example.com/another-image.jpg);
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}
<div id="right"></div>

Source:
https://example.com/css-tutorial

Answer №2

An alternative approach would be to utilize two containers, placing each image in its own container or as a background (the latter is preferable) and utilize flexbox for layout. This method offers simplicity with minimal code required. For further guidance, refer to this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

javascriptjqueryhtmlcsshref

Elements are failing to respond to the padding and margin adjustments in my CSS styling

I've been experimenting with creating a visually appealing div that serves as the centerpiece of a website. Imagine it resembling a standard "news" link. The width set at 80%, an image aligned to the left with a border, a headline detailing the lates ...

htmlcssmarginpadding

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

javascripthtmlcssreactjsuser-interface

Flexible columns with dynamic maximum width based on percentage

After extensive research, I am turning to stackoverflow for help with a seemingly simple task that has proven difficult to achieve. I have three columns of expandable content and need them to adjust in size proportionally when one or more are expanded. Eac ...

htmlcssmultiple-columnscalculated-columns

What could be causing my table to malfunction in IE8?

Is it just me, or do my CSS tables not work on IE8? <div class="main-table"> <div class="row"> <a class="secondary-table" href="#"> <div class="secondary-row"> <div class="secondary-cell"> ...

htmlcssinternet-explorer-8

Is it possible to adjust table rows to match the height of the tallest row in the table?

I've been attempting to ensure that all table rows have the same height as the tallest element, without using a fixed value. Setting the height to auto results in each row having different heights, and specifying a fixed value is not ideal because the ...

javascripthtmljquerycsshtml-table

What is the best way to display my menu bar when the icon is hovered over?

I want to create a menu bar similar to the one found on . I am unsure of how they achieved this effect, but it seems to involve a scroll-over action. However, when I attempt to replicate it, the words still appear even when the menu bar is collapsed. < ...

htmlcssmenubar

Having difficulty formatting text alignment using CSS

Is there a way to maintain the alignment of text in the output of the 'About' section even when the content changes dynamically? I want the new line to appear just below 'Lorem', but currently, it shifts below the colon(:). Since the le ...

javascripthtmlcss

Loading an animated SVG sprite file in real-time

Recently, I received an SVG sprite file from our designers to use in my app. The specified convention is to load the sprite at the top of the <body> element and then render icons using a specific code snippet: <svg class="u-icon-gear-dims"> ...

javascripthtmlcsssvg

what is the best way to position a glyphicon next to a form?

Forgive me for asking such a basic question, but I struggle with aligning and positioning elements. Here is my issue: https://i.sstatic.net/Uy6XB.jpg https://i.sstatic.net/TTs6V.jpg All I want is for the glyphicon to be displayed next to the textfield, ...

htmlcsstwitter-bootstrap-3

Utilizing Material UI Grid spacing in ReactJS

I'm encountering an issue with Material UI grid. Whenever I increase the spacing above 0, the Grid does not fit the screen properly and a bottom slider is visible, allowing me to move the page horizontally slightly. Here is the simplified code snippe ...

javascriptcssreactjsmaterial-ui

What is the best way to ensure the content div fills all available space? (JQM compatibility concerns)

Currently, I am facing an issue with displaying a pdf in an iFrame within my app. The problem lies in the fact that the iFrame does not occupy the entire space between the header and footer divs on the page. I am utilizing Jquery Mobile 1.1.0 for the theme ...

htmlcssjquery-mobileiframe

Issue with CSS for Pagination and Content Display

When I print an HTML page, I want to include custom text in the header of all printed pages. @page { margin-top:5mm; margin-bottom: 25mm; margin-left: 30mm; margin-right: 30mm; @top-right{ content: "Page title"; /* Page title ...

htmlcsscss-paged-media

Is it possible to combine the :last-child pseudo-class with the universal selector (*) in CSS or Sass

Here is the code I am currently using: .loken5 * padding-right: 5px .loken5:last-child padding: 0 I am wondering if there is a way in SASS to achieve the same effect with just one '.loken5' tag for saving space. Thank you :) ...

csssass

Tips for updating mysql records on a web page without the need to refresh it using PHP

Consider this situation: Below is the code that shows all user accounts. <table border="3px" align="center" cellspacing="3px" cellpadding="3px"> <tr> <td>Username</td> <td>Password</td> <td><a href="" oncli ...

phphtmlcssmysql

Words are cut off in a random manner on the entry content list for phone users

I struggle with CSS and have a basic understanding to make adjustments to my website. The issue I am encountering involves the .entry-content ul li elements. On desktop, they display correctly without random word breaks, but on mobile, words are being cut ...

css

Creating adaptable breakpoints for content using Bootstrap or pure CSS

I'm trying to create a responsive layout using the Bootstrap "row" and "col" classes, but I'm having trouble figuring out how to structure the content. Here's what I mean: https://i.sstatic.net/WkMmE.png This is my current HTML structure: ...

htmlcssbootstrap-4responsive-designfrontend

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

javascripthtmljquerycsstwitter-bootstrap

Header text aligned with image to accommodate parent size

Having trouble aligning an image/logo next to my header text while maintaining its aspect ratio and fitting within the container size. The goal is to have both the text and image horizontally centered. The parent div cannot have a fixed height as it needs ...

htmlcss

Positioning two buttons side by side in separate columns on the same horizontal alignment

My objective is to arrange these two buttons horizontally on the same level with the help of bootstrap. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href ...

htmlcssbootstrap-4