Picture featuring a div element serving as a partial background

Question

Picture featuring a div element serving as a partial background

How can I achieve a blue bar background behind this image?

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

This is my current approach:

.line-divider{
    height: 125px;
    background-color: #29334B;
}

<div>
    <div style="background-color: green; width: auto; height: auto;">
        <div class="line-divider" style="background-color: red;">           
            <img 
                src="https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg"
                contain
                height="300px" 
            >
        </div>                   
    </div> 
</div>

html css

Answer 1

Answer №1

To improve your code, I suggest focusing solely on the image tag:

img {
  display: block;
  margin: auto;
  border-image: linear-gradient(#0000 25%,#29334B 0 75%,#0000 0) fill 0//0 100vw;
}

<img src="https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg" height="300px">

Answer 2

To improve your code, I suggest focusing solely on the image tag:

img {
  display: block;
  margin: auto;
  border-image: linear-gradient(#0000 25%,#29334B 0 75%,#0000 0) fill 0//0 100vw;
}

<img src="https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg" height="300px">

Answer 3

Answer №2

If I were to address this situation, my approach would involve making adjustments to the HTML and CSS code.

body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center; 
    align-items: center;     
    height: 100vh;
    background-color: #f4f4f4;
}

.container {
    width: 100vw; 
    display: flex;
    justify-content: center; 
    background-color: green; 
    position: relative;
}

.line-divider {
    height: 200px;
    display: flex;
    align-items: center;
    position: relative;
}

.line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: red;
    z-index: -1;
    transform: translateY(-50%);
}

.line-divider img {
    height: 300px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

<div class="container">
    <div class="line-divider"> 
        <div class="line"></div>          
        <img 
            src="https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg"
        >
    </div>
</div>

Answer 4

If I were to address this situation, my approach would involve making adjustments to the HTML and CSS code.

body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center; 
    align-items: center;     
    height: 100vh;
    background-color: #f4f4f4;
}

.container {
    width: 100vw; 
    display: flex;
    justify-content: center; 
    background-color: green; 
    position: relative;
}

.line-divider {
    height: 200px;
    display: flex;
    align-items: center;
    position: relative;
}

.line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: red;
    z-index: -1;
    transform: translateY(-50%);
}

.line-divider img {
    height: 300px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

<div class="container">
    <div class="line-divider"> 
        <div class="line"></div>          
        <img 
            src="https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg"
        >
    </div>
</div>

Answer 5

Answer №3

Here is a straightforward method using Grid layout:

section {
  display: grid;
  grid-template-columns: 1fr 50% 1fr;
  grid-template-rows: 1fr 50% 1fr; 
}

div {
  background: #30353b;
  grid-area: 2 / 1 / 3 / 4;
}

img {
  grid-area: 1 / 2 / 4 / 3;
  width: 100%;
}

<section>
  <div></div>
  <img src="https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg">
</section>

Answer 6

Here is a straightforward method using Grid layout:

section {
  display: grid;
  grid-template-columns: 1fr 50% 1fr;
  grid-template-rows: 1fr 50% 1fr; 
}

div {
  background: #30353b;
  grid-area: 2 / 1 / 3 / 4;
}

img {
  grid-area: 1 / 2 / 4 / 3;
  width: 100%;
}

<section>
  <div></div>
  <img src="https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg">
</section>

Picture featuring a div element serving as a partial background

Answer №1

Answer №2

Answer №3

Similar questions

Artwork expanding incorrectly on HTML canvas

Add a fading transition feature to images that are loaded at a later time

Revealing and concealing adjacent elements within a specified class

Vue.js: Bringing dynamic HTML rendering to life within child components' slots

PHP data insertion using filters and validation

Is it possible to adjust table rows to match the height of the tallest row in the table?

Break down the string and iterate through using AngularJS

Has the HTML attribute 'step' stopped functioning properly?

The hyperlink tag within the overlay div is unresponsive

An easy method for modifying data on a webpage hosted by an ESP8266 device

OptinMonster's innovative feature - the Pardot form with an inline button

What is the best way to ensure that my website's elements adjust automatically to different screen sizes?

Box-sizing:border-box causing CSS padding problem in Firefox

Implement vertical navigation arrows in a Bootstrap accordion using JavaScript

Tips for ensuring a functioning dropdown menu while maintaining a fixed navigation bar position

Error CS0115: there is no appropriate method available to override for 'ASP.default_aspx.GetTypeHashCode()'

What is the best way to horizontally center a child div within its parent container while keeping it fixed at the top?

Did the menu get shifted downwards on the mobile version by using bootstrap?

Incorporating dynamic HTML templates onto a webpage using JavaScript/jQuery for seamless

Utilize alternate SCSS file depending on the direction of the text property