"Picture positioned on the edge of the container, just on one

Using Bootstrap 4, I was able to create a container with a div positioned outside of the container on the right side. Now I am wondering if it is possible to achieve the same effect with a picture div. I managed to do so by using a pseudo-element :after and applying a different background color. If you are unsure about what I am trying to accomplish

https://i.sstatic.net/IsY70.png

body {
  overflow-x: hidden;
}
.box {
     background-color: #F0F6FB;
    padding: 120px 20px;
    margin-right: 0;
    margin-left: auto;
    margin-top: -125px;
    position: relative;
    border-radius: 50px 0px 0px 50px;
}

 .box:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80%;
    right: -3000px;
    background: #F0F6FB;
    z-index: -1; 
    }
    
    .box-image {
    background: url(https://images5.alphacoders.com/456/456536.jpg);
    height: 230px;
    border-radius: 0px 50px 50px 0px;
    margin-top: 60px;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
    position: relative;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
  <br/><br/> <br/><br/> <br/><br/> <br/><br/>
     <div class="container">
       <div class="box-image">&nbsp;</div>
       <div class="box">
         &nbsp;
       </div>
     </div>
     <br/><br/> <br/><br/> <br/><br/> <br/><br/>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

htmlcss

Answer №1

Utilize container-fluid exclusively for the image. I have made adjustments to the code.

body {
  overflow-x: hidden;
}
.box {
     background-color: #F0F6FB;
    padding: 120px 20px;
    margin-right: 0;
    margin-left: auto;
    margin-top: -125px;
    position: relative;
    border-radius: 50px 0px 0px 50px;
}

 .box:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80%;
    right: -3000px;
    background: #F0F6FB;
    z-index: -1; 
    }
    
    .box-image {
    background: url(https://images5.alphacoders.com/456/456536.jpg);
    height: 230px;
    border-radius: 0px 50px 50px 0px;
    margin-top: 60px;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
    position: relative;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
  <br/><br/> <br/><br/> <br/><br/> <br/><br/>
     <div class="container-fluid">
       <div class="box-image">&nbsp;</div>
       </div>
       <div class="container">
       <div class="box">
         &nbsp;
       </div>
     
       </div>
       
     <br/><br/> <br/><br/> <br/><br/> <br/><br/>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Answer №2

Here's a helpful solution:

body {
  overflow-x: hidden;
}
.box {
     background-color: #F0F6FB;
    padding: 120px 20px;
    margin-right: 0;
    margin-left: auto;
    margin-top: -125px;
    position: relative;
    border-radius: 50px 0px 0px 50px;
}

 .box:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80%;
    right: -3000px;
    background: #F0F6FB;
    z-index: -1; 
    }
    
    .box-image {
    background: url(https://images5.alphacoders.com/456/456536.jpg);
    height: 230px;
    border-radius: 0px 50px 50px 0px;
    margin-top: 60px;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
    position: relative;
width: 80%;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  
   <body>
  <br/><br/> <br/><br/> <br/><br/> <br/><br/>
   <div class="box-image">&nbsp;</div>
     <div class="container">
      
       <div class="box">
         &nbsp;
       </div>
     </div>
     <br/><br/> <br/><br/> <br/><br/> <br/><br/>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Answer №3

body {
  overflow-x: hidden;
}
.box {
     background-color: #F0F6FB;
    padding: 120px 20px;
    margin-right: 0;
    margin-left: auto;
    margin-top: -125px;
    position: relative;
    border-radius: 50px 0px 0px 50px;
}

 .box:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80%;
    right: -3000px;
    background: #F0F6FB;
    z-index: -1; 
    }
    
    
    .box-image {
    background: url(https://images5.alphacoders.com/456/456536.jpg);
    height: 230px;
    border-radius: 0px 50px 50px 0px;
    margin-top: 60px;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
    position: relative;
}
 .box-image:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 80%;
    left: -3000px;
    background: #FF0000;
    z-index: 1; 
    }
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
  <br/><br/> <br/><br/> <br/><br/> <br/><br/>
     <div class="container">
       <div class="box-image">&nbsp;</div>
       <div class="box">
         &nbsp;
       </div>
     </div>
     <br/><br/> <br/><br/> <br/><br/> <br/><br/>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

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 could be causing the text-end to fail in Bootstrap 5?

Why can't I align the text to the right? Feeling frustrated as a beginner. <div class="top-bar"> <div class="container"> <div class="col-12 text-end"> <p><a href="tel:06 ...

htmlcssbootstrap-5

Struggling to display the inline navbar

For the past few hours (a little over 3 hours, to be exact), I've been grappling with an issue that seems fairly simple. Despite scouring through various SO posts and other resources, I just can't seem to figure out the problem. The crux of the ...

cssruby-on-railshtml

Tips for aligning an element in the center in relation to its sibling above

Help Needed with Centering Form Button https://i.sstatic.net/QhWqi.png I am struggling to center the "Send" button below the textarea in the form shown in the image. Despite trying various methods like using position absolute, relative, and custom margin ...

javascripthtmlcssreactjsbootstrap-4

After uploading the WordPress theme, the wp_enqueue_style() function fails to work properly

I recently developed a new WordPress theme and encountered an issue while trying to load specific stylesheets for my child sites using the is_page(array('')) function in my function.php file. Surprisingly, only the files that were added to all of ...

phpcsswordpressloadenqueue

How to locate the position of a specific word on a webpage using jQuery

In my div, I am struggling to search like an editor. Despite multiple attempts, I have not found a solution yet. Can someone please advise me on how to resolve this issue? <div id="content"> <p> Lorem Ipsum is simply dumm ...

javascriptjqueryhtml

Tips for creating a CSS transition that reverses direction

Is there a way to create a hover effect where a border appears at the bottom of an element when it is being hovered over, and then retracts back when the mouse leaves the element? I've managed to get the border to appear on hover using CSS, but I&apos ...

htmlcsscss-transitions

Change the CSS property to override the text-overflow with ellipsis

In my specific scenario, I need to override the default ellipsis behavior that adds '...' to text when using 'text-overflow: ellipsis', and instead use two stars **. Is there a way to achieve this using only Pure CSS? It is important t ...

css

Is it possible to incorporate a 960 grid system into a div container?

Can I contain an entire 960 grid within a div on my webpage? I am looking to create a page wider than 960px, and considering placing sidebars outside of the 960 grid while having it manage the central column. ...

htmlcssgrid960.gs

Click on the social media icon to access the link

Recently, I created a social media icon list for my website but I'm struggling to figure out how to add clickable links to them. I attempted using the "a" tag, but it's not functioning as expected: <div class="leftside"> <ul class= ...

htmlcsshyperlinkicons

Unable to update div CSS using button click functionality

I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...

javascripthtmlcss

Presentation: Positioning Next Buttons Beside Slide Images While Maintaining Responsiveness

I am facing a challenge with my slideshow project. The slideshow consists of images and text on each slide, along with previous and next buttons that are aligned within the parent container. I am trying to align these buttons at the midpoint of each image ...

htmlcssresponsive-designslideshow

How to Overlay a Semi-Transparent Object on a Background Video using CSS and HTML

Hey there, I'm encountering a puzzling issue with my website. I have a background video set up, and I wanted to overlay a floating textbox on top of it. However, no matter what I do, the background color and borders of the textbox seem to be hiding be ...

htmlcss

Is it possible that using vim omni-complete will remove the word that I had previously selected

When writing HTML with gvim, I find it frustrating that the omni-complete feature always deletes my previous word and even my previously selected ones. For example, let's say I'm in the middle of writing the following code**('_' indica ...

htmlvimomnicomplete

What is preventing me from creating accurate drawings on canvas?

I'm currently working on a paint application and facing an issue. When I place the painting board on the left side of the screen, everything works fine and I can draw without any problems. However, when I move it to the right side of the screen, the m ...

javascripthtmlcsscanvas

What is the best way to set inner text using jQuery?

The code snippet below demonstrates a specific issue: <span id="test1">some text</span> <span id="test2">some text</span> Upon loading the content, the following JavaScript is executed: alert($('test1').text(); $(' ...

jquerycss

Trying to conceal the scrollbar on MS Edge and Firefox?

Currently, I am working on a scrollable menu that requires the scrollbar to be hidden. In Chrome, I have achieved this by using the following code: .menu::-webkit-scrollbar { display: none; } I would like to know if there is an equivalent solution ...

htmlcssfirefoxscrollbarmicrosoft-edge

Aligning Font Awesome icons inside md-buttonsFinding the perfect alignment for

I am attempting to center font awesome icons within a button so that they align perfectly with the text on a toolbar. Below is the code snippet I am working with: <div ng-app="app"> <md-toolbar> <div class="md-toolbar-tools" md-tall ...

javascriptcssangularjsfont-awesomeangular-material

Having difficulty with category level activation while implementing PHP page navigation with arrays and foreach loop

After receiving some excellent assistance from CBroe and @MeathCoder in a previous post, I managed to make some amazing changes. However, I'm currently facing an issue with setting the category as active. Here's the code snippet I'm working ...

phphtml

How can a script be properly embedded into an HTML document?

Currently, I am facing an unusual issue with the script tags in my Django project. My layout.html file includes Jquery and Bootstrap in the head section. Using Jinja, I extended layout.html to create a new file called main.html. In main.html, I added a new ...

javascriptjqueryhtmldjango

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss