CODEWITHSUNDEEP
htmlcss
Maciej Wojcik
Maciej Wojcik

Reputation: 2171

How to set background-color on 50% of area CSS

I want to have a div, and inside this div must be a field with some color. So i want to have div for example 200px x 200px and set background-color:gray which size ll be 100px x 100px, and start at position 50px 50px.

Please look at this snippet with code:

div{
    background-color: gray;
    background-size: 100px 100px;
    background-position: 50px 50px;
    
    min-width:200px!important;
    min-height:200px!important;
    max-width:200px!important;
    max-height:200px!important; 
      
    padding:50px;
}
<div>some text</div>

So as You see the background color filled all div width and height. Is this possible to make background to fill only 50%? enter image description here

Note: The red area should be transparent.

Upvotes: 5

Views: 19115

Answers (6)

misterManSam
misterManSam

Reputation: 24692

We can achieve this effect with a linear gradient, background-size and background-position

  • The background looks like this:

    background:  linear-gradient(to bottom, grey 0%, grey 100%) no-repeat;

    All this linear-gradient does is give us a background colour that can be manipulated like a background image.

  • The gradient is treated like an image and can be centered and re-sized:

    background-size: calc(100% - 100px) calc(100% - 100px);
background-position: center;

The calc reduces the size of the background by exactly 100px and the transparent space around the div when centered is 50px in width.

Full example

The second div shows the true size of the div and the 20vw width and height shows how the div can be re-sized.

div {
  background: linear-gradient(to bottom, grey 0, grey 100%) no-repeat;
  background-size: calc(100% - 100px) calc(100% - 100px); /* Reduce height of background by 100px and width by 100px*/  
  background-position: center;
  padding: 80px;  /* 50px border + 30px additional padding */
  width: 20vw;
  height: 20vw;
  min-width: 200px;
  min-height: 200px;
}
div.no-gradient {
  background: grey;
}
/*For example*/

html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: linear-gradient(to bottom, black 0%, white 100%);
}
div {
  float: left;
}
<div>some text</div>
<div class="no-gradient">I am the same size as the other div</div>

Upvotes: 9

Viira
Viira

Reputation: 3911

Here you go..

div.container {    
  width:200px;
  background:transparent;
  border: 1px solid #a7a7a7;
  padding:50px 0;
}
div.inner-container{
  background-color:gray;
  width: 100px;
  padding:25px 0;
  margin:auto;
}
<div class="container">
  <div class="inner-container">
   ---some text---
  </div>
</div>

Upvotes: 1

Tim Grant
Tim Grant

Reputation: 3458

Other answers have provided good workarounds. Here is the cold hard truth:

You can’t set a background color for half an element’s content area

A background color applies to an elements content area. You can’t apply a background color to half of an element’s content area.

Mozilla explains this:

The content area is the area containing the real content of the element. It often has a background, a color or an image (in that order, an opaque image hiding the background color) and is located inside the content edge; its dimensions are the content width, or content-box width, and the content height, or content-box height.

The content area of an element has exactly one background color. The color may be transparent, and may be inherited rather than defined, or entirely covered - but still, there is always one, and there can be only one.

Inspected elements in a browser developer's tools will help you get familiar with this.

There are many workarounds for the effect you are asking to create, including nested elements, pseudo elements, and thick borders.

Upvotes: 2

probablyup
probablyup

Reputation: 8134

Use a psuedoelement to simulate the coloring in the desired quadrant.

Upvotes: 0

Hanna
Hanna

Reputation: 10753

Both background-size and background-position can only be used for images, so you can't use them with just colors.

I would wrap that div in another and do this:

div.wrapper {    
  height:200px;
  width:200px;
  padding:50px;
  background:red;
}
div.inner{
  background-color: gray;
  width: 100px;
  height: 100px;
}

JSFiddle

If that's not an option you could also use an image instead, and position that.

Upvotes: 0

Johannes
Johannes

Reputation: 67738

You can simply achieve that with a border that has the desired thickness:

http://codepen.io/anon/pen/XjpbNJ

<div class="x">text</<div>

.x {
  width: 200px;
  height: 200px;
  background: grey;
  border: 100px solid red;
  text-align: center;
}

Upvotes: 1

Related Questions