Question 305269 in CSS Question posted in
Some basic documentation can be found here.

Css – How to set different sizes for multiple background "chessboard+center_lines"

I want to do this using only the one background property.

But the chessboard background is not 64 x 64 and has 384 x 256 size

Chessboard MUST_BE 64 x 64

This is my attempt:

<!DOCTYPE html><style>
body { margin:0; background-color:#000 }
div { 
  width: 768px;
  height: 512px;
  background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,#5a5 0) 384px 256px,
              repeating-conic-gradient(#a55 0% 25%, #105 25% 50%) 64px 64px
}

</style><div></div>
Tags:

2

Answers


  1. 0

    You are setting the position, not the size. The correct syntax is position / size where size is optional.

    And you can use 50% 50% for the size of the first gradient, no need to do the calculation manually

    body {
  margin: 0;
  background-color: #000
}

div {
  width: 768px;
  height: 512px;
  background: 
   conic-gradient(from 90deg at 1px 1px, #0000 90deg, #5a5 0) 0 0/50% 50%, 
   repeating-conic-gradient(#a55 0% 25%, #105 25% 50%) 0 0/64px 64px
}
    <div></div>
    Login or Signup to reply.
  2. 0

    you can fix it using

    background: repeating-conic-gradient(#a55 0% 25%, #105 25% 50%);

background-size: 64px 64px;

    To set different sizes for multiple backgrounds, you can use the background-size property in CSS. This property specifies the size of the background images.

    In this configuration, the background-size property is set to 384px 256px, 64px 64px. This means the first background image (the conic gradient) will be 384px wide and 256px high, and the second background image (the repeating conic gradient) will be 64px wide and 64px high. The sizes are specified in the same order as the images in the background property.

            body { margin:0; background-color:#000; }
        .wrapper { padding: 50px; display: flex; gap: 20px;}
        .old { 
            position: relative;
            width: 768px;
            height: 512px;
            background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,#5a5 0) 384px 256px,
                      repeating-conic-gradient(#a55 0% 25%, #105 25% 50%) 64px 64px
        }
        .old::before { content: "Your Code";}

        .new {
            position: relative;
            width: 768px;
            height: 512px;
            background: repeating-conic-gradient(#a55 0% 25%, #105 25% 50%);
            background-size: 64px 64px;
        }
        .new::before { content: "New Code";}
        .old::before,
        .new::before { position: absolute; top: -20px; left: 50%; transform: translate(-50%, -50%); display: block; width: fit-content; height: fit-content; color: red;}
        
    <div class="wrapper">
        <div class="old"></div>
        <div class="new"></div>
    </div>

    Thanks…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search