-3

I would like to create a div with a partial background, example:

enter image description here

I tried applying margin in white, but I'm a bit lost.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Igor O
  • 301
  • 1
  • 6
  • 26
  • What have you tried? Have you written any code? If so, can you add it to your post? –  Jul 25 '19 at 00:20
  • @vonajots as mentioned, I tried using margin/padding. Don't have the idea what else I could do. Is necessary to show the code for a simple margin? – Igor O Jul 25 '19 at 00:47
  • what you want to achieve? why not having a nested div with the background? – Temani Afif Jul 25 '19 at 00:49
  • This div it's just an "illustration", to say that a video is going to appear there. After add dynamically the video object, I don't want this div background to appear behind the video if the video is smaller. – Igor O Jul 25 '19 at 00:53
  • 2
    all this need to belong to the question, we cannot imagine you will be using a video with that "illustration" so try to put more details in your question – Temani Afif Jul 25 '19 at 00:55
  • What is the background? An image? A gradient? – Jon P Jul 25 '19 at 01:03
  • Sorry if I was not clear enough. I wanted to know if this was possible only using css and background color, without image. – Igor O Jul 25 '19 at 01:05
  • *I wanted to know if this was possible* --> but we are not understanding what you want. It's clear only for you ... there is nothing called *partial background*. we need more details about what you want. – Temani Afif Jul 25 '19 at 01:08

2 Answers2

2

You didn't write any code in question. So i writing example Html and CSS code now. I hope this code will has solve your problem.

body{
background-color: #e3e3e3;
}
.bg-container{
background-image: url("https://i.stack.imgur.com/Q9aDy.jpg");
width:250px;
height: 250px;
background-color: #fff;
background-repeat: no-repeat;
background-size: 200px;
background-position: center center;
}
<div class="bg-container">

</div>
ariferol01
  • 221
  • 4
  • 13
1

You can use background-size: width height; and background-position: x y; to specify the space the background occupies within the div.

A gradient is an image, so you can add one and manipulate it as a color. Use background-color to specify the background you want to use behind it. background-repeat: no-repeat ensures that it is used only once.

background-repeat: no-repeat;
background-size: 80% 80%;
background-position: 50% 50%;
background-image: linear-gradient(white, white);
background-color: black;

The background-position values specify the horizontal and vertical positions, respectively. Use 50% 50% to center it.

vh_rda
  • 11
  • 3
  • *The background-position values specify the distance from the left and top border of the div* --> this is not true when it comes to percentage values (https://stackoverflow.com/a/51734530/8620333) – Temani Afif Jul 25 '19 at 01:09
  • From w3schools.com: "The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%." – vh_rda Jul 25 '19 at 01:15
  • and where it says: *the distance from left and top* in this quotation? – Temani Afif Jul 25 '19 at 01:16
  • If 0% is the left border and 100% is the right border, then 20% is 20% in distance from the left border. – vh_rda Jul 25 '19 at 01:20
  • sorry but you interpretation is wrong, it's not a *distance*. Check the link I shared to better understand how percentage values works (you can also run some tests and you will see) – Temani Afif Jul 25 '19 at 01:21