Ways to showcase an image that goes beyond the top and bottom boundaries of a div using CSS

Attempting to extend an image beyond the top and bottom of a div. Successful in extending it below, but how can I achieve this effect above?

Check out the online demo here.

.about {
  background-image: linear-gradient(100deg, #483dec, #4074eb);
}

.about img {
  width: 100%;
  margin-bottom: -100px;
}

.about .desc-section {
  margin: auto 0;
}

.about h2 {
  font-size: 24px;
  color: #ffffff;
}

.about p {
  font-size: 16px;
  line-height: 2;
  color: #ffffff;
}
<section class="about">
  <div class="container">
    <div class="row">
      <div class="col-6">
        <img src="https://images.unsplash.com/photo-1558981001-1995369a39cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
      </div>
      <div class="col-6 desc-section">
        <h2>This is heading</h2>
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is.</p>
      </div>
    </div>
  </div>
</section>

htmlcsstwitter-bootstrap-3bootstrap-4

Answer №1

One way to adjust the position of an image is by adding position: relative to the .img selector and specifying a value such as bottom: 30px. In my example, I used 30px for both top and bottom adjustments. You can view the updated code in this modified fiddle. I hope this solution helps!

.about {
    background-image: linear-gradient(100deg, #483dec, #4074eb);
    margin-top: 30px;
}

.about img {
    width: 100%;
    margin-bottom: -100px;
    position: relative;
    bottom: 30px;
}

.about .desc-section {
    margin: auto 0;
}

.about h2 {
    font-size: 24px;
    color: #ffffff;
}

.about p {
    font-size: 16px;
    line-height: 2;
    color: #ffffff;
}

Answer №2

/* adjusting top margin for about section */
.about {
    background-image: linear-gradient(100deg, #483dec, #4074eb);
    margin-top: 100px;
}

/* updating margin-bottom to margin-top for image */ 

.about img {
    width: 100%;
    margin-top: -100px;
}

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

Is the rotate() method in SVG supported on web browsers when passing in additional parameters like angle, centerX, and centerY similar to the CSS rotate

I have recently learned about a rotate transform that allows for rotating around a specified center point using the `rotate(angle, centerX, centerY)` method. However, I have noticed that this method does not seem to work when applied via CSS. Interestingl ...

htmlcsssvg

Customizing Bootstrap SCSS Styles: Using SASS to Override Defaults

This is the content of my styles.scss file: // Custom variables and mixins @import "variables.scss"; @import "mixins.scss"; // Global CSS @import 'bootstrap/scss/bootstrap.scss'; @import "global.scss"; @import "nav.scss"; @import "resume-item.sc ...

twitter-bootstrapsassbootstrap-4

Creating a webpage using webkit technology

As someone new to web development, I am eager to create a website that is user-friendly on both desktops and mobile devices. Recently, I stumbled upon a site with impeccable design and functionality using what appeared to be "screen webkit". I'm curi ...

javascripthtmlcss

Providing space for a two-line title

It's a bit tricky to explain, so if anyone has a better title in mind, feel free to change it. I'm trying to create a black box behind my headline. I'm using a span inside the h-tag for this purpose, but I need to add some padding to the le ...

csspaddinghtml

Resize the tab header in primefaces to fit your needs

Is there a way to change the height of the tabView's header specifically in primefaces? Take for instance the tabs with headers like "God Father I", "God Father II" on this link, I only want to adjust the height of the header and not the entire tab. ...

cssprimefaces

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

javascripthtmlcss

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

Error Message: Unable to resolve the signature of a class decorator when called as an expression. The argument type 'ClassDecoratorContext' is not compatible with the parameter type 'string | symbol | undefined'. After creating a book ...

javascripthtmlangulartypescriptngrx

I am interested in implementing a feature that restricts a particular website from being accessed more than once every 24-hour period by

I'm looking to restrict user access to a webpage to once every 24 hours. Are there any solutions besides using cookies? I could use some guidance on how to implement this. Thank you in advance for your help. ...

phpsessioncookieshtml

What is the best way to create curved text using HTML 5 Canvas?

Looking to create a canvas graphic similar to this flash animation: I have already drawn six arcs and now I need suggestions for writing six words within these arcs. Any creative ideas? ...

javascripthtmlcanvas

CSS code for a fixed fullscreen menu with scrolling

I have implemented a full-screen menu that covers the entire screen, excluding the header and menu tab bar. You can view it here: https://i.stack.imgur.com/h5cQa.png On smaller screens, the entire menu cannot be displayed at once, as shown here: https://i. ...

htmlcssangular

A Spring application deploying a WAR file encounters a 404 error when attempting to access the

Working on a Java EE application using Spring and Maven, the project structure follows the typical hierarchy. Here is a glimpse of it: MyApplication src main webapp WEB-INF layout ...

htmlcssjspmaven

Obtain the Class Name Value by Utilizing the "Begins With" Selection Method

Consider the following HTML structure: <a href="#" class="a b nl-3522">First</a> <a href="#" class="a b nl-7352">Second</a> <a href="#" class="a b nl-4874">Third</a> <!-- Note that classes nl-* are being added dynami ...

jqueryhtml

Comparison of the "Proposed Recommendation" versus the "Candidate Recommendation"

In a recent piece about HTML5, it was mentioned that the Proposed Recommendation date is set for 2022, while the Candidate Recommendation date is from 2012. I'm curious to understand the distinction between the "Proposed Recommendation" and the "Cand ...

htmlw3c

I am having trouble getting the pagination to function properly on my custom materialize projects

I am experiencing issues with the list of sub-pages on the official demo sites: Materialized Materialize(css) The navigation bar does not update the active page number or content when clicked. Both websites are using materialize css. If you click ...

jqueryhtmlmaterializematerialized

What is the best way to incorporate these elements into my Bootstrap 5 navbar design?

This is the current layout of my navbar, with the logo in the center. I now want to enhance it by adding a search bar and some icons similar to this example: ideal navbar Here is my current navbar for reference: My current navbar <header> <n ...

htmlcssnavbarbootstrap-5

Ways to prevent an element from displaying a hover border or outline

I need help with styling a group of 50% width elements that are displayed next to each other. I want to add a 20px white border around each element to create a separation between them. This is necessary because I have a responsive layout and always require ...

htmlcss

Guide on utilizing popup box input to amend CSS (background color)

I'm looking for some guidance on JavaScript and CSS. Is there a way to create a popup box where users can input a color (any main primary color recognized by CSS) and then have the background color of the page change accordingly in an external styles ...

javascriptcss

transforming JSON data into an array

When I try to access a URL in my browser, the JSON response is as follows: [{ "id": "1234", "name": "Carl", "age": "17" }, { "id": "9876", "name": "John", "age": "19" }] Here is the function being used: ...

javascripthtmljsonjquery

Checking for correct HTML tags using JavaScript

Looking to validate some input in javascript and confirm if it is a valid HTML tag. Any straightforward methods with JQuery for this task? If not, any suggestions on how to achieve this using Regex? Thank you! ...

javascriptjqueryhtmlregex

Restrictions on the height of Bootstrap 4 .card are determined by the height of the parent when

I am trying to create a card deck that contains multiple cards displayed side by side, even on mobile devices, with both horizontal and vertical scrolling capabilities. The parent container of the cards has a fixed height, however, I am struggling to adju ...

htmlcssbootstrap-4