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

Incorporate titles for items in the jquery caroufredsel plugin

I am currently using the second example of the caroufredsel plugin, which can be found on this page . I am attempting to add a caption for each picture. To achieve this, I have used `li` and `lis` in my HTML code: <div class="list_carousel"> &l ...

javascriptjqueryhtmlajax

Overlay a semi-transparent gray layer onto the background color

My Table has various TDs with different background colors, such as yellow, red, green, etc., but these colors are not known beforehand. I am looking to overlay a semi-transparent gray layer on certain TDs so that... The TD with a yellow background will t ...

htmlcss

What methods can I use to achieve a stylish and responsive design for my images?

I have been encountering difficulties styling the images for my website. Despite multiple attempts, I am unable to apply CSS properties such as border-radius and responsive design to the images on my page. The images load fine, but they do not seem to acce ...

htmlcssimageresponsive

How to center align an input vertically with Bootstrap 3

I am having trouble vertically aligning an input in my project. Interestingly, my code works for a span but not for the input! I'm puzzled - what could be the reason behind this? JSFiddle Here is the CSS code snippet: .float { display: table-cel ...

htmlcsstwitter-bootstrap-3

What is the best way to customize the appearance of the initial row in each tr cluster?

Looking to add a button for expanding child rows within a datatable, with each group in the table having the same child elements.... The provided CSS currently displays the icon on every row throughout the entire table. td.details-control { backg ...

htmlcssdatatablesgrouping

Tips for displaying a variable that contains HTML in PHP

I'm facing an issue with a variable that holds an HTML iframe obtained from a third-party package. When I try to display it using <?php echo $variable ?>, the page shows the raw HTML with tags instead of rendering it properly. Can someone guide ...

phphtml

Animation effect in Jquery failing to execute properly within a Modal

I have developed a small jQuery script for displaying modals that is both simple and efficient. However, it seems to only work with the fadeIn and fadeOut animations, as the slideUp and slideDown animations are not functioning properly. I am unsure of the ...

javascripthtmljquerycss

Arranging div blocks in columns that are seamlessly aligned

I am dealing with a situation where I have several boxes or blocks arranged in a 3-column layout. These boxes are styled using properties like float: left, width: 33%, but they have varying heights. Is there a way to make sure that the boxes always fill i ...

jqueryhtmlcssgrid-layout

Removing the currently selected item from the OwlCarousel

I am trying to enable users to delete the item that is currently active or centered in an OwlCarousel. I have come across some code related to deleting items, but it seems to be a rare question: $(".owl-carousel").trigger('remove.owl.carous ...

javascripthtmljqueryowl-carousel

Challenges arising from the offset in an overflowing Div

Encountering issues with JQuery Offset when utilized within a div that has a fixed height and overflow. This particular div contains two columns, a main column and a sidebar. The objective is to have one of the sidebar divs scroll within its container unt ...

jquerycsshtmloffset

What are some strategies for efficiently displaying a large amount of data on a screen using Javascript and HTML without sacrificing performance?

Imagine having a hefty 520 page book with over 6,200 lines of text ranging from 5 to 300 characters each. The challenge lies in efficiently displaying this content on the screen for users to read without causing lag or performance issues. Attempting to re ...

javascripthtmlcssreactjscanvas

What is the most effective method for coding an input tag with specific restricted characters?

Introduction I have a unique idea for creating an input field of fixed length where users can fill in the gaps without modifying certain pre-filled characters. For example, I want to display "__llo w_rld!" and let users complete the missing characters. In ...

javascripthtml

Guide to adding an icon within an HTML `<input>` element

Is anyone able to help me successfully place my icon font inside the search input field? I've tried adjusting the margin and padding, but nothing seems to be working! If you have any insights or suggestions, please let me know. Your help is greatly a ...

htmlcss

Output a PHP variable in HTML following the submission of a form

When a form is submitted, I am redirecting to the specified header location using the following code: PHP Code: $TestMessage = "This is just a sample message and not a constant value. The original data will be retrieved from the database"; if(mysqli_aff ...

phphtmlhttp-headersforms

Visualize data from ajax call in tabular format

I want to display the results of an SQL query in a table using AJAX. I have written code that executes the query during the AJAX call, but when I try to display these values in a table, it shows null values on the div tag. What could be the reason for this ...

javascripthtmlsqlajax

Homepage featuring a stacked image background similar to Kickstarter

I am trying to replicate the stacked image effect seen on kickstarter.com. However, I am facing an issue where the images do not overflow on the screen as desired. The arrow indicates the area that needs to be filled with the image. Check out the image he ...

htmlcss

Adding a stylesheet dynamically to the <head> tag using $routeProvider in AngularJS

Is there a way to load a specific CSS file only when a user visits the contact.html view on my AngularJS application or site? I came across this helpful answer that almost made sense to me How to include view/partial specific styling in AngularJS. The acce ...

cssangularjsconditional-statementsroute-provider

Enhance your HTML code using JavaScript (specifically jQuery)

Is there a way for me to transform the following code into a more visually appealing format? <td> <a href="/Test/Page/2">Previous</a> <a href="/Test/Page/1">1</a> <a href="/Test/Page/2">2</a> 3 ...

jqueryhtmldomrazor

Tips for preventing extra whitespaces and line breaks from being added to the render tree in Blazor applications

Consider the code snippet below <div> @for (int i = 0; i < 10; i++) { <span class="@classes[i]">@i</span> } </div> The desired output is (with each character styled differently) 01234567890 Howev ...

htmlcssrazorblazor

The behavior of Mozilla in handling JQuery attr() function may result in variations in design elements such as font-family or font-size

I'm currently working on the login form. Below is my view in CodeIgnitor: <div id="login-form"> <?php echo heading('Login', 2); echo form_open('login/login_user'); echo form_input('email', set_value ...

javascriptjqueryhtmlcss