Linking two block backgrounds with CSS or JavaScript: A comprehensive guide

Question

Linking two block backgrounds with CSS or JavaScript: A comprehensive guide

I'm working on a website that has a challenging background image. I want to add text at a specific point in the background, but I'm having trouble figuring out how to do it.

The page is split into two sections, with each section supposed to display a different part of the background image. I attempted to divide the background and use background-size: cover, but the transition between the images isn't seamless.

Ensuring that the background remains fully responsive is crucial. How can I achieve this? Any assistance would be greatly appreciated!

I have included an image illustrating how I envision everything should appear.

Visualization of desired outcome

javascript html css

Answer 1

Answer №1

To achieve precise positioning on a webpage, utilize absolute positioning and specify the desired location in the CSS code. There are various options available for positioning elements, including the sticky value which keeps the element fixed within the viewport rather than relative to other content.

<style>
div.absolute { 
  position: absolute;
  top: 100px; 
  right: 100px; 
  width: 200px; 
  height: 100px; 
}
</style>
</head>
<body>
<div>This div element contains an image.
  <div class="absolute">This nested div will be precisely positioned based on the CSS rules specified above.</div>
</div>
</body>

Answer 2

To achieve precise positioning on a webpage, utilize absolute positioning and specify the desired location in the CSS code. There are various options available for positioning elements, including the sticky value which keeps the element fixed within the viewport rather than relative to other content.

<style>
div.absolute { 
  position: absolute;
  top: 100px; 
  right: 100px; 
  width: 200px; 
  height: 100px; 
}
</style>
</head>
<body>
<div>This div element contains an image.
  <div class="absolute">This nested div will be precisely positioned based on the CSS rules specified above.</div>
</div>
</body>

Answer 3

Answer №2

Using a custom JavaScript function, I retrieved the height of the window and utilized it as the flex-basis for two main sections. Additionally, I placed special text in an absolute position near the center to suit your preference. Feel free to implement this structure for responsive design, as demonstrated with fullpage view. The intentional use of background colors enhances the visibility of the layout.

const height = window.outerHeight;
document.querySelector('.part1').style.flexBasis = height/2 + 'px';
document.querySelector('.part2').style.flexBasis = height/2 + 'px';
console.log(height);

body{
  margin:0;
  background-image:url('https://images.pexels.com/photos/4992859/pexels-photo-4992859.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
   background-repeat: no-repeat;
  background-size: cover;
  
}
.container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:white;
}
.part{
  opacity:.3;
  display:flex;
  align-items:center;
  font-size:3rem;
}
.part1{
  background-color:red;
}

.part2{
  background-color:blue;
}

.special{
  font-size:1rem;
  position:relative;
  margin:50px auto 50px 50px;

}

<div class="container">
  <div class="part part1">
    part1: here is the part one
  </div>
    <p class="special">Some special text</p>
  <div class="part part2">
    part2: here is the part two
  </div>
</div>

Answer 4

Using a custom JavaScript function, I retrieved the height of the window and utilized it as the flex-basis for two main sections. Additionally, I placed special text in an absolute position near the center to suit your preference. Feel free to implement this structure for responsive design, as demonstrated with fullpage view. The intentional use of background colors enhances the visibility of the layout.

const height = window.outerHeight;
document.querySelector('.part1').style.flexBasis = height/2 + 'px';
document.querySelector('.part2').style.flexBasis = height/2 + 'px';
console.log(height);

body{
  margin:0;
  background-image:url('https://images.pexels.com/photos/4992859/pexels-photo-4992859.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
   background-repeat: no-repeat;
  background-size: cover;
  
}
.container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:white;
}
.part{
  opacity:.3;
  display:flex;
  align-items:center;
  font-size:3rem;
}
.part1{
  background-color:red;
}

.part2{
  background-color:blue;
}

.special{
  font-size:1rem;
  position:relative;
  margin:50px auto 50px 50px;

}

<div class="container">
  <div class="part part1">
    part1: here is the part one
  </div>
    <p class="special">Some special text</p>
  <div class="part part2">
    part2: here is the part two
  </div>
</div>

Linking two block backgrounds with CSS or JavaScript: A comprehensive guide

Answer №1

Answer №2

Similar questions

JS/TS Strategies for Sharing Code Across Multiple Projects

How can we modify the elements within an Object tag in HTML? If it is achievable, what is the process?

Manage Raspberry Pi through a local website

What is the best way to relocate the box within this HTML/CSS document?

What is the best way to uncheck a checkbox once both of my input fields [type=text] have been cleared or are empty

What is the best way to execute a jQuery method once WordPress posts have finished loading?

Updating the UpdatePanel causes duplication of CssClass

The content contained within the .each loop within the click event is only executed a single time

Combine multiple arrays of JSON objects into a single array in PHP

Is there a special Angular technique to ensure a div remains scrolled to the bottom of its items?

Establish the focus when the TinyMCE editor loads

Modifying column layout within an HTML webpage

Sending users to either Page A or Page B depending on the response received from the API

Troubleshooting: Issue with Ajax communication to PHP backend script

When attempting to swap out ":customimage:" with an image in a React.js HTML view, the result displayed is [object Object]

After completing the installation of "node-pty" in an electron-forge project on Linux, I noticed that the pty.node.js file is not present. What is the proper way to install node-pty

Is it possible to conduct an auction in JavaScript without using the settimeout or setinterval functions?

Change the icon switch from fas fa-lock-open to fas fa-lock by adding an event listener for a click action

Issues encountered with jQuery's $.ajax function when communicating with PHP

What is the process for using JQuery to switch the class of an element to 'nested-class'?