Utilizing CSS to place an image on top of the upcoming <div> container

My goal is to create a layout similar to the one displayed in the linked image.

https://i.stack.imgur.com/7DSE9.jpg

Currently, I am using Bootstrap 3 and my HTML markup looks like this:

<body class="gray-bg">
<section class="white-bg">
<div class="row">
    <div class="col-lg-12">
        <h2 class="text-center">Title</h2>
        <img class="feature-image" src="./images/image.jpg" alt="">
    </div>
</div>
</section>

<section>
<div class="row">
    <div class="col-lg-12">
        <p>Body text...</p>
    </div>
</div>
</section>
</body>

I am curious about what CSS modifications need to be made for .feature-image to achieve the desired layout. Any suggestions are greatly appreciated!

Thank you!

htmlcsslayoutposition

Answer №1

Since I'm using a mobile device, I'm unable to verify my response but adjusting the top margin of your gray_bg div to negative should resolve the issue. You can do this by setting margin-top: -10px; Additionally, you may need to place your bottom div within a container-fluid class

Here's an example that works:

.white-bg {
  background-color: white;
}

.feature-image {
  background-color: lightgray;
  padding-top: 100px;
  padding-bottom: 50px;
  padding-left: 50px;
  padding-right: 50px;
  margin-left: 150px;
  margin-bottom: -20px;
}

.gray-bg {
  background-color: gray;
}
<body class="gray-bg">
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
<section class="white-bg">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Title</h2>
<img class="feature-image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRnL5-GO2muNIeI97gaUNYWdyzB5tLozHkacW4O8Q0TNWQC35ns" alt="">
</div>
</div>
</section>

<section>
<div class="row">
<div class="col-lg-12">
<p>Body text...</p>
</div>
</div>
</section>
</body>

Answer №2

If you want to adjust the positioning using CSS, you might consider this code:

.col-lg-12{
    position:relative;
    top:-300px;
}

One alternative approach could be adding a new class, for instance "up", to the col-lg-12 element that contains the image and title. Then, you can style the .up class separately to avoid conflicting with any existing Bootstrap classes.

Answer №3

Combine your title, image, and body text within a single div container. Avoid splitting your content between two different sections to accommodate background color; instead, opt for a gradient background applied to the section or body of your webpage.

Check out this helpful tool for creating gradient backgrounds:

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

Revamping the login interface for enhanced user

Whenever I attempt to login by clicking the login button, there seems to be an issue as it does not redirect me to any other page. Instead, I am left on the same page where I initially clicked the button. The intended behavior is for users to be redirected ...

javascripthtmlbutton

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

htmlcss

What are the best ways to create image animations on top of other images using CSS or JavaScript?

Imagine if the first image is in black and white, while the second one is colored. How can we make the black and white image change to color after a timeout period, with an animation similar to loading progress bars? Is this achievable using CSS or JavaScr ...

javascripthtmlcss

The storage of HTML5 data is not being saved locally

<html> <head> <title></title> <style type="text/css"> body { font-family: tahoma; } h2 { font-weight: bold; border-bottom: 2px solid gray; margin-bottom: 10px; } #dat ...

javascripthtmllocal-storage

When scrolling, the fixed menu bar at the top of the page is making the content below jump

I am attempting to create a fixed submenu that sticks to the top of the page when scrolling, but I am encountering some issues. The current code I have is as follows: $(window).scroll(function () { if ($(window).scrollTop() > 175) { $('#loca ...

javascriptjqueryhtmlcss

Dynamic hovering over isotopic elements

I'm looking to create a webpage where images are arranged dynamically like on this website: . I also want each image to have a hover effect displaying specific information about the image. After some research, I came across a JavaScript library calle ...

javascriptjqueryhtmlcss

Unleashing the power of ::ng-deep to access CSS in an Angular child component

I'm attempting to modify the CSS class of a child component by using ::ng-deep. Despite my efforts with various iterations of the code provided below, I have been unsuccessful in accessing the CSS. The structure of the HTML component is depicted in th ...

cssangularsassng-deep

Is there a way to code a checkbox within a dropdown menu?

I am seeking assistance in making this dynamic I am still learning Laravel and require some guidance on how to program a checkbox within a select dropdown. Here is the HTML form I have: <div class="container w60"> <div class="row pad_y_2 ...

phphtmllaravel-5

Using 2 viewports depending on the device

My website looks great on all devices and desktop, but I want to set a different viewport for iPad. I would like the iPad to have the same width as my desktop version, which is 1100px wide. Currently, the site is designed with percentages and ems up to (ma ...

cssipadviewport

Is it possible to control the display of open graph images on the iOS messaging app?

Recently, I discovered that it's possible to have multiple og:image meta tags on a single page. However, I'm struggling to figure out how this may impact the display on the iOS message app. I came across a Shopify website that showcases a mosaic ...

htmlfacebook-opengraph

Broaden the default className attribute of the component

Greetings! I'm currently using Bootstrap with React and I am trying to figure out how to extend my component by passing className props deeper. Within my atom component, I have two separate files. The first one contains the component declaration. B ...

javascriptcssreactjsreact-bootstrapbootstrap-5

Web application using HTML5, AJAX, and a manifest file for offline usage

Looking for help with an issue on my website: Currently trying to put it offline. Using the manifest file: Encountering an issue with the left and right arrow navigation while offline. The browser shows an xmlhttprequest error, similar to the one found ...

jqueryxmlajaxhtmlmanifest

Data structure designed specifically for a drawing tool application

Currently, I am in the process of developing a unique sketching application using the HTML5 Canvas element. Despite my progress, there is one particular challenge that has stumped me. The main concept of the application involves allowing users to manipula ...

javascriptalgorithmdata-structureshtmlcanvas

"Create a notification pop-up in CSS that appears when a link is clicked, similar to

I am looking to create a model page that functions similarly to the inbox popup on Stack Overflow. When we click on the inbox icon, a small box appears with a tiny loader indicating messages or comments. The box then expands depending on the content inside ...

jqueryhtmlcssajax

Using PHP to redirect upon clicking a link

My issue involves directing users to another page or form and saving the button they click as a value when selecting a CRN (course number). <table class="table table-bordered table-hover table-striped"> <thead> ...

phphtmlmysqli

bring in all the files located within the Directory

Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...

javascriptphphtmlcsshead

Reposition div when clicked

I have encountered a challenge where I am unable to perform a small task. My goal is to have the position of "div1" change upon clicking on "div2", taking into account that "div2" is nested inside "div1". Additionally, when clicking on "div2" again, "div1" ...

javascriptjqueryhtmlcss

Utilizing Vue CSS variables as inline styles

Incorporating CSS variables in my component has allowed me to dynamically set the width of a div based on computed data within the setup() setup(props) { const progressBar = PositionService.getProgressBar(props.position); const progressWidth = `${p ...

cssvue.jscontent-security-policy

Flex: 1 does not completely fill the Angular layout div in vertical dimensions

I am currently developing a sidebar using Angular and Flex. The app-sidebar is nested within the Angular component layout shown below: <div fxlayout="row" fxFill> <app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar> <div ...

htmlcssangularflexbox

Is there a way to store a jQuery CSS manipulation within a cookie?

On my Wordpress site, I have a code that allows users to change the font size of the body when they click on one of three generated buttons: <button class='body_standard_font_size'>Standard</button> <button class='body_medium ...

jquerycsscookies