HTML Guide - issues tagged as CSS

CSS: “background”: X is not a “background-color” value.

There’s an invalid value for the background property in your CSS. The W3C HTML Validator has attempted to match the value to a background color, without success.

Here’s how to resolve this issue:

Identify the Correct CSS Configuration: The background property in CSS can take various forms, such as a color, an image, or a combination of background components. Ensure you provide a valid value.
Correct the Value: If you meant to set a background color, use a valid color format (e.g., hexadecimal, RGB, RGBA, named color, etc.).

Valid CSS Examples:

Using a named color:
```
.example {
  background: blue;
}
```
Using a hexadecimal color:
```
.example {
  background: #00ff00;
}
```

Using an RGB color:

.example {
  background: rgb(255, 0, 0);
}

Using an RGBA color (with transparency):

.example {
  background: rgba(255, 0, 0, 0.5);
}

Setting an image as background:

.example {
  background: url('image.jpg');
}

Combining multiple background properties:

.example {
  background: url('image.jpg') no-repeat center/cover;
}

CSS: “grid-column”: X is not a “grid-column” value.

The issue you’re encountering pertains to the use of the grid-column property in CSS, which is part of the CSS Grid Layout module. The grid-column property is typically used to specify how elements are placed along the grid columns in a grid layout.

The grid-column property is a shorthand for specifying both the starting grid line and the ending grid line for a grid item in order to define its horizontal position in the grid. The correct way to use it generally involves setting either a specific line number or a span value.

Syntax

The basic syntax for the grid-column property is:

grid-column: <start-line> / <end-line>;

<start-line>: The grid line where the item starts. This can be a line number, a named grid line, or a span keyword.
<end-line>: The grid line where the item ends. Similarly, this can also be a line number, a named grid line, or use span to indicate spanning across a number of lines.

Common Usage

Specific Lines: Specify the starting and ending lines explicitly.
```
grid-column: 2 / 4;
```
This would place the item starting from line 2 and ending before line 4.
Spanning Columns: Use the span keyword to define how many columns you want the item to span.
```
grid-column: 1 / span 2;
```
This would start the item at line 1 and span two columns.

Issue with grid-column: 0

The value 0 is invalid for grid-column because grid lines in CSS Grid Layout are indexed starting from 1. Attempting to use 0 implies a non-existent line and therefore results in an invalid value error.

Correcting the Issue

Determine which grid line your item should start from and which line it should end on, using valid line numbers or span values.
Update your CSS to use valid grid lines:
```
/* Correct usage example: */
.grid-item {
  grid-column: 1 / span 2;
}
```
Here, the grid item starts at line 1 and spans across 2 columns.

Ensure that your grid layout is properly set up with the desired number of rows and columns so that you can appropriately set valid grid-column values.

CSS: “grid-template-rows”: X is not a “grid-template-rows” value.

The specified value for the grid-template-rows property is not valid. This CSS property specifies the height of each row in a CSS grid layout.

Correct Usage of grid-template-rows

The grid-template-rows property accepts several types of values:

Length values (e.g., px, em, rem):
```
grid-template-rows: 100px 200px;
```
Percentages:
```
grid-template-rows: 50% 50%;
```
Flexible units (fr):
```
grid-template-rows: 1fr 2fr;
```
Auto keyword:
```
grid-template-rows: auto auto;
```
Repeat function:
```
grid-template-rows: repeat(3, 1fr);
```

Minmax function:

grid-template-rows: minmax(100px, 200px) auto;

Example

Here’s an example where we define two rows, one with a height of 100px and the other one of 200px.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example of grid-template-rows</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .grid-container {
      display: grid;
      grid-template-rows: 100px 200px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div>Row 1</div>
    <div>Row 2</div>
  </div>
</body>
</html>