Could an image be positioned outside of its container so that when I zoom out, it remains anchored to the left side of the browser?

Can this be achieved using HTML, CSS, and bootstrap 4? I attempted to create it.

Check out the image here:

When using 100vw, the image displays full width causing content to break down.

<section class="about">
        <div class="container c-container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="about-img">
                        <img src="images/our-mission.jpg" class="img-fluid" alt="our-mission">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                    <div class="about-details">
                        <h4>Lorem ipsum</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                            diam nonummy nibh euismod tincidunt ut laoreet dolore magna
                            aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                            nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                            aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
                            in hendrerit.
                        </p>
                        <a href="">more about us</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
htmlcssbootstrap-4

Answer №1

Is this the correct way to approach it?  

  <div class="section section-ab">
            <div class="container container-c">
                <div class="row align-center">
                    
                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 offset-lg-6">
                        <div class="ab-details">
                            <h4>Our Vision</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                                eiusmod tempor incididunt ut labore et dolore magna
                                aliqua. Ut enim ad minim veniam, quis
                                exercitation ullamco laboris nisi ut
                                aliquip ex ea commodo consequat. Duis aute irure dolor
                                in reprehenderit.
                            </p>
                            <a href="">learn more about us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    
    
    
    
       .section-ab {
        position: relative;
    }
    .section-ab::before {
        content: "";
        background: url('../images/our-vision.jpg') no-repeat;
        background-size: 100% 50%;
        height: 400px;
        width: 100%;
    }

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

What's the best way to ensure that columns clear properly when using bootstrap?

Instead of providing code to solve an issue, I am using Bootstrap and encountering problems with the roster section where the heights are inconsistent. My temporary solutions involved adding classes to specific divs or setting fixed column heights, but I&a ...

jqueryhtmlcsstwitter-bootstrap

Can the placement and dimensions of the audio controls be customized?

I am working on an audio tag that initially hides the controls, and only shows them when a user clicks on a specific link. Here is the code snippet: var audio = document.getElementById(audioId); if (audio.paused) { audio.src = clip; audio.play(); ...

csshtmlhtml5-audio

Is there a way to retrieve the complete date and time from a Beautifulsoup ResultSet?

My current challenge involves utilizing selenium and beautifulsoup to retrieve the date and time of an Instagram post. I am encountering difficulty in extracting the datetime element from the HTML. from bs4 import BeautifulSoup from selenium import webdriv ...

pythonhtmlseleniumbeautifulsoup

Avoid connecting HTML input elements with both JavaScript and Java models

I am troubleshooting an issue with my login page code. <div ng-show="!loggedIn()"> <form ng-submit="login()"> Username: <input type="text" ng-model="userName"/> Password: <input ...

javascriptjavahtmlangularjs

Repairing the collapsible side panel

I've successfully integrated the off-canvas sidebar template from Twitter Bootstrap into my project and have fixed it for small/medium views. However, I'm experiencing some difficulties when trying to make it work properly for extra-small devices ...

htmlcsstwitter-bootstrapcanvas

The 3D card flipping animation is dragging on for an eternity

I'm experiencing a delay in triggering my 3D Card Flip animation on click, and I can't figure out why it's happening. If you want to see an example, please scroll down and click on any black and white picture here: Here is the code I' ...

jqueryhtmlcsscss-animations

The texture of the dodecahedron is nowhere to be found

I've been experimenting with ThreeJS to construct a dodecahedron and apply a texture to each face. I'm also utilizing Raycaster to identify which face is being clicked on. While everything works smoothly for a cube, I encounter issues when attem ...

htmlthree.js

The textboxes are not displaying the floating numbers correctly

My issue involves 3 textareas with numbers displayed next to them. While I previously used a CSS table layout, it became inefficient when adding content between each row. I am puzzled as to why the second number, "2)", appears positioned next to the first ...

htmlcss

Tips for updating the data color attribute for Bootstrap in an HTML document

In the process of designing a template, I am attempting to modify the background color of the following div: <div class="sidebar" data-active-color="blue" data-background-color="wihte"> It seems that I am limited to selecting either black or ...

jqueryhtmlcsstwitter-bootstrapcolors

Loading elements of a webpage in a consecutive order

I am currently working on implementing a content slider within my Django application. The specific slider that I am using can be found at this link. One challenge that I am facing is the need to load close to one hundred 'contentDiv' pages, and I ...

javascriptjquerypythonhtml

Within the HTMLDivElement.drop, the parent element now encapsulates the new child element

I've encountered a DOM exception that has me stuck. My issue involves div elements and a button - when the user clicks the button, a random div is selected and another div with a background-color class is appended to it. Essentially, clicking the butt ...

javascripthtmlcssdrag-and-drop

What is the best way to expand a footer's height to fill the remaining space on the screen?

Any idea how to achieve this look: Creating a footer that stretches to fill the remaining height of the screen at the bottom of the page. Can CSS make this happen? ...

htmlcsslayout

Having trouble figuring out how to make my Bootstrap Navbar more responsive

I'm having trouble with the responsive design of my Bootstrap navbar. I want all the buttons to be displayed in a row when on desktop, and then collapsed under the fas fa-bars navbar toggler as the viewport size gets smaller. All necessary stylesheet ...

htmlcssnavbarbootstrap-5

Is it possible to embed HTML code within JavaScript strings?

Is my approach to inserting HTML into a JavaScript string correct? In particular, I want to insert an HTML link into a div tag using JavaScript. Here is the HTML: <div id="mydivtag"></div> And here is the JavaScript code: document.g ...

javascripthtmlhyperlinkdom-manipulation

Fixing JavaScript Image Swap Bugs

Seeking assistance with a JavaScript Image Swap creation. Can anyone provide guidance on identifying coding errors in my JavaScript? Any help or pointers on correct usage of getElementById would be greatly appreciated! <title>Photo Gallery</tit ...

javascripthtml

What is the best way to ensure that the parent div adjusts its width to match the width of its child elements using

I am currently facing an issue with a flex parent div that does not adjust its width to fit the child elements within. How can I resolve this? Essentially, I need to create a dynamic two-dimensional matrix where the user sets the dimensions, resulting in ...

htmlcssflexbox

Tips for positioning bootstrap text-box and button on the same line

I am trying to achieve a layout where the text box and button are aligned in one line using Bootstrap CSS. Here is the code snippet I have been working with: HTML : <div class="new-meows"> <input type="text" class="form-control" > ...

htmlcssbootstrap-4bootstrap-ui

Angular, PHP, and MySQL working together to establish database connectivity

Greetings! I am facing some challenges with a small project involving mySQL and PHP for the first time. My main focus right now is on establishing connectivity. Despite following various tutorials, I have been unable to connect to the database and keep enc ...

javascriptphphtmlmysqlangularjs

Is there a way in Bower to automatically select only CSS or JS files from an open source project, rather than both, if that is my preference?

Although I suspect the answer, imagine I desire to incorporate the CSS from Twitter Bootstrap without the Javascript. I've set up a gulp script to extract everything from my bower.json file, minimize the JS, compress the CSS, and transfer it to my de ...

javascriptcssnpmgulpbower

Switching the keyboard language on the client side of programming languages

I'm interested in altering the keyboard language when an input element changes. Is it possible to modify the keyboard language using client-side programming languages? And specifically, can JavaScript be used to change the keyboard language? ...

javascripthtmlangularjstypescriptecmascript-6