What is the best way to combine a top <div> with a bottom <div> in an image without creating unsightly white gaps?

I need help overlapping two divs on top of an image in HTML. The first div should cover part of the top area of the image, while the second div should cover part of the bottom area of the image. These divs should be displayed over the image without leaving any white spaces. I also want this layout to be responsive to the width of the view or parent div. How can I achieve this in a clean way?

Here is my HTML:

* {
  padding: 0px;
  margin: 0px;
}

#image {
  max-width: 100%;
}

.rects {
  height: 100px;
}

#rect-top {
  background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479));
}

#rect-bottom {
  background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75);
}
<h1>Start</h1>
<div id="rect-top" class="rects"></div>
<img id="image" src="image-with-gradient.jpg">
<div id="rect-bottom" class="rects"></div>
<h1>End</h1>

This is what I am aiming for:

As shown in the example, there should be no white space before and after the h1 tags.

htmlcssweb-frontend

Answer №1

Enclose your image and overlapping divs within a parent div. Inside that, position your overlapping div elements absolutely.

It's important to avoid using id for styling purposes as each id should be unique per document and can only belong to one element.

Rather than creating unnecessary markup for gradients, utilize pseudo elements like ::before and ::after.

* {
  padding: 0;
  margin: 0;
}

.image-container {
  padding: 50px 0;
  position: relative;
}

.image {
  max-width: 100%;
}

.image-container::before,
.image-container::after {
  content: '';
  height: 100px;
  position: absolute;
  width: 100%;
}

.image-container::before {
  background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479));
  top: 0;
}

.image-container::after {
  background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75));
  bottom: 0;
}
<h1>Start</h1>
<div class="image-container">
  <img class="image" src="https://placekitten.com/g/1920/1080">
</div>
<h1>End</h1>

This approach eliminates the need for z-index since elements with position: absolute automatically stack on top of non-positioned elements.

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 JavaScript code will automatically execute loops

Let me illustrate my point with two functions. Function 1 This function triggers a transition when you hover over the square. If you move your mouse off the element and then back on while the transition is still in progress, it will wait until the end of ...

javascriptjqueryhtmlcssjquery-ui

Automatically change div background image based on window resizing

.step-1-4 { background:url('../images/gadget-4-sprite.png') no-repeat; width:950px; height:70px; margin-left: 15px; } The code above sets the CSS for a div containing a background image. The dimensions of the div match that of the imag ...

htmlcss

The height of the input element is greater than the size of the font

I am facing an issue with an input element that has a height 2px higher than what I expected. Here is the relevant CSS: .input { font-size: 16px; padding: 15px; border: 1px solid black; border-radius: 3px; width: 400px; } <input class=" ...

htmlcss

Bootstrap component malfunctioning and not performing as expected

Currently, I am learning how to use Bootstrap and attempting to replicate the example themes found on their official website. The specific theme I am focusing on is available at this link: https://getbootstrap.com/docs/4.3/examples/pricing/ Unfortunately, ...

htmlcsstwitter-bootstrap

Efficiently adjusting the height of a sticky sidebar

I am currently implementing a Bootstrap grid with two divs in a row. I need my reply-container to be fixed (sticky). However, when setting position: fixed; it is affecting the element's width by adding some additional width. With position: sticky, set ...

cssvue.jsbootstrap-4grid

Stay tuned for Quasar's input validation event notifications

Within my Vue3 Quasar application, I have implemented a component structure similar to the following: <template> <div class="q-pa-md"> <div id="myCustomLabel">{{ props.label }}</div> <q-input r ...

cssvue.jstypesvuejs3quasar-framework

rearranging nodes from multiple arrays into a single array and then repositioning them within the parent array using angularjs

[![enter image description here][1]][1]I am working with AngularJS and I have multiple arrays named list1, list2, and list3. Each array is used in a different list. Within my application, there are two buttons and two divs - the left div displays elements ...

javascripthtmlcssangularjs

How to prevent npm from being accessed through the command prompt

I recently began working on a ReactJs project. However, I am facing an issue where after starting npm in Command Prompt, I am unable to enter any text. Should I close the cmd window or is there a way to stop npm? You can now access your project at the fol ...

javascriptcssreactjsnpmcmd

The echo function is repeating something that is not text

I have set up a basic bottle server using Python: from bottle import route, run, static_file @route('/') def home(): return static_file("home.html", root='.') @route("/<fileName>") def respond(fileName): return static_f ...

phppythonhtmlechobottle

Using different CSS classes interchangeably in AngularJS

Imagine you have a list with an unknown number of items, ranging from one to potentially dozens. You want to display five CSS classes in a regular alternating pattern. What would be the most effective approach to achieve this? Here is some sample HTML cod ...

javascriptcssangularjsng-class

Error loading custom Javascript in MVC 4 view during the first page load

I'm working on an MVC 4 application that utilizes jQuery Mobile. I have my own .JS file where all the functionality is stored. However, when I navigate to a specific view and check the page source, I notice that all scripts files are loaded except fo ...

javascriptjqueryhtmlasp.net-mvcjquery-mobile

Numerous options available in a dropdown menu

I have a Dropdown menu that offers various functions. "Update" option redirects to a page for updating information "Export Form" option redirects to a page for exporting the form Although the current code allows these actions, I am facing an issue with ...

javascriptphphtml

When we typically scroll down the page, the next section should automatically bring us back to the top of the page

When we scroll down the page, the next section should automatically bring us back to the top of the page without having to use the mouse wheel. .bg1 { background-color: #C5876F; height: 1000px; } .bg2 { background-color: #7882BB; height: 1000px; } .bg3 ...

javascripthtmlcss

Using jQuery to create clickable URLs within a rollover div

I am looking to have the div appear on a mouse over effect in the following code. Is there a way for me to input a url based on the data that is passed to it? Anchorage: ["Anchorage", "(555)555-5555"], (This represents the data being posted) AtlanticCit ...

javascriptjqueryhtml

Show divs in identical position when clicking

There are 4 section divs that need to be displayed in the center of the page when clicked, but the last one appears further down. This is likely due to the flex box nature. What is the best way to ensure all sections appear at the exact same location? Ano ...

javascripthtmlcss

Is there a way to prevent a web page from automatically refreshing using JavaScript?

I would like my webpage to automatically refresh at regular intervals. However, if a user remains inactive for more than 5 minutes, I want the refreshing to stop. There is an example of this on http://codepen.io/tetonhiker/pen/gLeRmw. Currently, the page ...

javascriptjqueryhtml

Using AngularJS and the ng-show directive, you can set a <div> element to

Objective: My aim is to show the content of a div according to the status of checkboxes, while also ensuring that these divs are visible by default If I have this code snippet: <html> <head> <script src="https://ajax.googleapis.com/ajax/li ...

javascriptjqueryhtmlcssangularjs

What causes a horizontal line to form when a user enters white space?

I have written a piece of code which seems to be causing an issue when running it. Whenever I input empty spaces, it results in creating a horizontal line. import React, { Component } from 'react'; export default class App extends Component { co ...

javascriptcssreactjs

Create a visually appealing Zoom Effect with CSS while ensuring the div size remains constant

Update: What should I do if the width size is unknown? Check out the demo on JS Fiddle If you visit the provided link, I am trying to achieve a zoom effect where only the image inside the div zooms, not the entire div itself. However, I seem to be missin ...

htmlcss

Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

I am facing a challenge with my containing div that has a 'h1' title and a 'p' description inside it. My goal is to have the 'description paragraph' hidden while the 'title' is visible when the page loads, and to hav ...

javascriptjqueryhtmlcss