Ways to add a background color to the top portion of a div element?

Question

Ways to add a background color to the top portion of a div element?

.bg {
  background-color: gray;
  height: 200px;
}

<div class="bg">
  <div>
    <img src="https://s3.amazonaws.com/images.seroundtable.com/google-rainbow-texture-1491566442.jpg" style="width:200px">
  </div>
  <div>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:200px">
  </div>
</div>

Is there a way to add a background to only half of two separate div elements? For example, the bottom half of the first div and the upper half of the second one, without changing the height of the entire div?

https://i.sstatic.net/gJfkC.jpg

Similar to the brown background shown in the image. How can a shared background be applied in the middle of two distinct div sections?

html css bootstrap-4

Answer 1

Answer №1

To create an appealing background, consider using the linear-gradient property in CSS.

.bg {
  background: linear-gradient(to bottom, #ddd 50%, #9A8D6D 50%); /* This gradient covers half with #ddd and the other half with #9a8d60 */
  height: 200px;
}

<div class="bg">
  <div>
    <img src="https://s3.amazonaws.com/images.seroundtable.com/google-rainbow-texture-1491566442.jpg" style="width:200px">
  </div>
  <div>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:200px">
  </div>
</div>

If you desire margin between different sections of the background, utilize color stops within the gradient:

.bg {
  background: linear-gradient(to bottom, #ddd 25%, transparent 25%, transparent 50%, #9A8D6D 50%); /* Gradient covering various percentages to create margin */
  height: 200px;
}

<div class="bg">
  <div>
    <img src="https://s3.amazonaws.com/images.seroundtable.com/google-rainbow-texture-1491566442.jpg" style="width:200px">
  </div>
  <div>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:200px">
  </div>
</div>

Answer 2

To create an appealing background, consider using the linear-gradient property in CSS.

.bg {
  background: linear-gradient(to bottom, #ddd 50%, #9A8D6D 50%); /* This gradient covers half with #ddd and the other half with #9a8d60 */
  height: 200px;
}

<div class="bg">
  <div>
    <img src="https://s3.amazonaws.com/images.seroundtable.com/google-rainbow-texture-1491566442.jpg" style="width:200px">
  </div>
  <div>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:200px">
  </div>
</div>

If you desire margin between different sections of the background, utilize color stops within the gradient:

.bg {
  background: linear-gradient(to bottom, #ddd 25%, transparent 25%, transparent 50%, #9A8D6D 50%); /* Gradient covering various percentages to create margin */
  height: 200px;
}

<div class="bg">
  <div>
    <img src="https://s3.amazonaws.com/images.seroundtable.com/google-rainbow-texture-1491566442.jpg" style="width:200px">
  </div>
  <div>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:200px">
  </div>
</div>

Ways to add a background color to the top portion of a div element?

Answer №1

Similar questions

Incorporating an image into a list of checkboxes post-connection

Having trouble with jQuery's show/hide methods not functioning properly

What is the best way to adjust the layout for smaller screens using material ui?

What is the best way to split a jQuery tab into four equally sized divs?

When the <body onload="function()"> event is triggered, my animated image freezes in

Ways to Export HTML to Document without any borders or colorful text

Struggling to line up text and image next to each other?

Is it possible to define the sequence of wrapped items in CSS flexbox?

Adjusting AngularJS scroll position based on key presses

Creating high-quality tabs for a gaming project

a height of 100% with a minimum height of 100%

What is the process for automatically activating the Enter key once moving to the next text input field?

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

Is there a way to enable scrolling on a page without editing the HTML? I have a table inside a div that is overflowing, and I want the page to scroll,

Click on the link to access and activate the function

Customizing Your WordPress Menu with HTML5 Features

Trouble arises when attempting to append a class through ng-class upon clicking

Trying to retrieve a CSS property using jQuery

Trouble with z-index when attempting to stack forms on top of one another

Enclosing floated elements within a parent div