CODEWITHSUNDEEP
htmlcss
arahant
arahant

Reputation: 2203

css percentage based background

How can I show a div with some text (which fills the div completely in width) and then show a background color which is only 40%, without obstructing the text.

The following is problematic because the text is within the inner div. I want it in the outer div so to speak. 

<div>
<div style="background-color:#EAFEE2; width:35%;"><span>This is a much longer text and takes up a lot of space</span></div>
</div>

Upvotes: 0

Views: 89

Answers (2)

Alireza
Alireza

Reputation: 2449

You can use gradiant background .

background:linear-gradient(90deg, #EAFEE2 40%, #FFFFFF 50%)

check this link for More information: CSS: Set a background color which is 50% of the width of the window

Upvotes: 1

Johannes
Johannes

Reputation: 67788

You can make the inner DIV absolutely positioned, with a negative z-index and the desired width restriction as in the following snippet.

Note: The inner DIV is empty, the text is only in the outer DIV, not in the inner one)

.outer {
  position: relative;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background: #EAFEE2;
  z-index: -1;
}
<div class="outer">
<div class="inner"></div>
This is a much longer text and takes up a lot of space
</div>

Upvotes: 2

Related Questions