Adjusting the position of a background image with Bootstrap

problem

I am struggling with the layout of this design. My goal is to center an image of an app within these boxes, ensuring that it overlaps both the top and bottom of the background for sections containing text. I have experimented with various techniques such as positioning and z-index, but without success. I am utilizing Bootstrap for columns and rows. Additionally, I need the design to be responsive and visually appealing on mobile devices. I envision a layout similar to the attached image, but with the central picture positioned in front of the background. Any advice or suggestions?

Here is my current HTML and CSS code:

<center> 
<div class="margin50">
<section class="appfeatures section-spacing">
<div class="container_appfeatures">
<div class="row">
    <div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-1 text-left"><img class="appicon_white" src="img/createtip_white.png" alt="Create Tip Icon"></div>
    <div class="col-md-offset-4 col-md-1 text-right"><img class="appicon_white" src="img/rank_white.png" alt="Rank List Icon"></div>
    <div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-1 text-left"><img class="appicon_white" src="img/feed_white.png" alt="Live Score Icon"></div>
    <div class="col-md-offset-4 col-md-1  text-right"><img class="appicon_white" src="img/profile_white.png" alt="Experts Icon"></div>
    <div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>

</div>
</div>
</section>
</div>
</center>


.appicon_white {
width: 60px;
height: 60px;
    }

.appfeatures {

background: rgb(102,204,153);
background: linear-gradient(180deg, rgba(102,204,153,1) 0%, rgba(30,130,76,1) 100%);
opacity: 0.5;
}


.container_appfeatures {
width: 80%;

}



.margin50 {
margin-top: 75px;
margin-bottom: 75px;
width:100%; 
height:100%;
background-image: url("../img/profile.png");
background-repeat: no-repeat;
background-position: center center;
padding-top:95px;
padding-bottom:95px;
}
htmlcssbootstrap-4

Answer №1

To ensure proper alignment, avoid using col-md-offset-4 and stick to using col-md-4. Additionally, be sure to include <div class="row"> in every row of your HTML code. Here is the updated version:

<center>
    <div class="margin50">
        <section class="appfeatures section-spacing">
            <div class="container_appfeatures">
                <div class="row">
                    <div class="col-md-3 col-sm-3 text-right">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/createtip_white.png" alt="Create Tip Icon">
                    </div>
                    <div class="col-md-4"> </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/rank_white.png" alt="Rank List Icon">
                    </div>
                    <div class="col-md-3 col-sm-3 text-left">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                </div>
                <img src="https://path to your iPhone image">
                <div class="row">
                    <div class="col-md-3 col-sm-3 text-right">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/feed_white.png" alt="Live Score Icon">
                    </div>
                    <div class="col-md-4"> </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/profile_white.png" alt="Experts Icon">
                    </div>
                    <div class="col-md-3 col-sm-3 text-left">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                </div>
            </div>
        </section>
    </div>
</center>

CSS code adjustment: 

.appicon_white {
    width: 40px;
    height: 40px;
}

.appfeatures {
    background: rgb(102, 204, 153);
    background: linear-gradient(180deg, rgba(102, 204, 153, 1) 0%, rgba(30, 130, 76, 1) 100%);
    opacity: 0.5;
    margin: 170px 0;
    position: relative;
}

.container_appfeatures {
    width: 80%;
    margin: 75px auto;
}

.margin50 {
    width: 100%;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.margin50 img {
    max-width: 250px;
    width: 100%;
}

img.phone-middle {
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Jsfiddle link for visualization: https://jsfiddle.net/marksalvania/94uyLvp1/

In order to optimize display on mobile devices or smaller screens, consider adding the following CSS within your media queries:

.col-md-3 {
    text-align:left;
    font-size: 10px; /*adjust as needed*/
}

.col-md-1,
.margin50 {
    display:none; /*optional for hiding icons on mobile view*/
}

.your-other-styles {
    /*add any additional styles here*/
}

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 Unique Font That Mysteriously Blocks Fake Italic Styles on Webkit Browsers

Currently, I am utilizing the PT Sans Narrow font in my project, which unfortunately only offers regular and bold styles. As a result, I require the browser to apply faux italics when needed. Strangely, this functionality is only working on non-webkit brow ...

htmlcssfontsfont-facewebfonts

Tips for fixing the issue of disappearing top margins in elements while using CSS3 Pie in Internet Explorer 7

Hey there! I've been experimenting with a lot of CSS3 effects, but I'm running into issues trying to get the same effects to work on IE 7 and 8. I've been attempting to use CSS3 Pie to help with this. While CSS3 Pie has worked well for som ...

htmlcsscss3pie

Looping through ViewData strings and populating a form with their values

I am currently utilizing ASP.NET and MVC to work on a project where I need to take a list of strings and populate a form with them. The goal is for users to import account numbers, have the form prefilled with these numbers, and then submit the data. I&apo ...

javascripthtmlasp.net-mvcrazorviewbag

How can the datepicker be adjusted to display from right to left?

//Initializing the datepicker $('dob').on('click',function(){ $('.datepicker').datepicker({ "format": "dd/mm/yyyy", "autoclose": true }); }); <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstra ...

jquerycsscss-float

Utilize JavaScript and HTML to show error messages based on whether the user is deactivated or if the input is invalid

I need to show different error messages under the 'Email Address' input if the user is disabled and under the 'Password' input if the user is invalid. In my debugging process, I discovered that a user being disabled results in a "Status ...

javascripthtmlangularjs

What is the best way to position a div as a footer within a larger main div?

I am aiming to create a div with simple header, content, and footer sections. Here is the design I am trying to achieve: https://i.stack.imgur.com/QfnGa.png You can check out my code on jsfiddle. I'm having trouble understanding how the relative lay ...

htmlcss

Optimizing Container size for devices with smaller screens

After creating a container with a panel and a panel body, everything looked fine when viewed on desktop. However, upon checking it on my phone, I noticed a large space on the right with nothing there. If you'd like to see an image of the issue, click ...

htmlcsstwitter-bootstrap

Creating a responsive body background design

For quite some time now, I've been grappling with this issue and despite my best efforts, I haven't been able to crack it. Essentially, I have a background image set for the body tag. However, whenever I add text on top of the background, the ima ...

htmlcssresponsive-designresponsive

empty area located on the right side of my HTML/CSS website

I'm struggling to figure out why a small white space appears next to my webpage. Inspecting the element shows that the body ends before the space begins, indicating the border is where it should be. As a beginner in HTML and CSS, I hope this issue wil ...

htmlcsswhitespace

What is the best way to give a video a border-radius in an HTML/CSS code?

Is there a way I can apply border-radius to the <video> element? This is what my video currently looks like: (image shown here: <a href="https://i.sstatic.net/izKz0.png") I attempted styling the video tag with CSS, but the changes did ...

htmlcssvideostylingborder-radius

Elements that are added dynamically do not contain any space between each other

I have a markup template that looks like this. <template id="unsequenced-template"> <button type="button" class="btn btn-primary railcar"></button> </template> Then, I use the following JavaScript ...

javascripthtmljquerytwitter-bootstrapbootstrap-5

Learn how to easily reset the index value within the same template in Angular

In my template, I have 3 tables with the same JSON data as their parent elements. <tbody> <ng-container *ngFor="let row of reportingData.RecommendationData; let i=index"> <tr *ngIf="row.swRecommendations"> <td& ...

htmlangularhtml-table

Animate the jQuery menu to slide both upwards and downwards, as well as shift the inner divs to the right

I'm facing a jquery issue and could use some assistance. I am trying to achieve the following: Add a class "active" to style tags when they are active. Slide up/down vertically within a div (#information - containing "About" and "Contact"). Slide le ...

jqueryhtmlcssanimationmenu

Utilize JavaScript and jQuery to extract the selected text's context from a webpage

I'm looking to extract the contextual information surrounding a selected text on a web page, specifically the 25 words before and after it. I've tried using JavaScript and jQuery with the following code snippet but unfortunately, it doesn't ...

javascriptjqueryhtmljquery-ui

Tips for activating multiple CSS animations when scrolling

I am currently working on a project that involves multiple CSS animations. However, I am facing an issue where these animations only occur once when the page initially loads. I would like them to trigger every time the user scrolls past them, regardless of ...

javascripthtmlcsscss-animations

How to ensure two unordered lists are aligned at the same baseline using CSS

Is it possible to align two UL's to a single baseline, with one UL aligned flush left and the other flush right? Currently, the UL's are not aligned and appear like this: How can I make sure the two UL's share the same baseline? CSS #foo ...

csshtmlalignmenthtml-lists

The content in the div is not contained within a border in the css/html

I am struggling with a div wrapper that has a border, but the border is not wrapping around the content and I can't figure out why. Here is my issue on screen: This is what I want it to look like: Below is my HTML code: <div class="event_area_t ...

htmlcssborderwrapper

Troubleshooting issue with RadioButton check change not updating in onPost event in ASP.Net project utilizing Bootstrap HTML and C

Having created two radio buttons, grouped them together, and applied bootstrap classes for styling; I am encountering an issue where the values of the radio buttons are not updating when clicked and submitted. Interestingly, the checkboxes on the same form ...

c#htmlasp.netrazor

Struggling with aligning two divs side by side on an HTML page

Recently, I've been experimenting with Electron and attempting to create 2 divs side by side. Despite trying various alignment options found here, nothing seems to be working for me. Here's the code I have so far: Code body, html { hei ...

htmlcss

Are external JavaScript files cached in the same manner as images?

Is it possible for a single pagehandler script to be called from the browser cache when navigating between multiple pages that refer to it? ...

javascripthtml