Magento 2: How to change background color on products list?

Question

I want to change the color of the background from white to grey on products list.

Here is style.css

// Products Grid
.product-item .mage-error { 
    display:none !important; 
}
.product-image-photo.img-thumbnail {
    padding: 0;
    line-height: 1;
    background: none;
    border: none;
    min-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto !important;
    display: block;
    bottom: 0;
    right: 0;
    .border-radius(0);
}

.products-grid {
    &.slider-1-row .owl-item {
        padding: 0 15px;
    }
    .product-item-info {
        margin-bottom: 30px;
        .product-top {
            position: relative;
            overflow: hidden;
            a {
                &.photo {
                    display: block;
                    height: 0px;
                    &:after {
                        content: "";
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        background-color: #000;
                        opacity: 0;
                        visibility: hidden;
                        .transition(all 300ms);
                        z-index: 3;
                    }
                    img.swatch-option-loading {
                        content: none;
                        + .img-hover-show {
                            opacity: 0 !important;
                        }
                    }
                    div {
                        display: none;
                        &.swatch-option-loading {
                            display: block;
                            background-image: url("../images/loader.svg");
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: 50px auto;
                            background-color: rgba(0,0,0,0.8);
                            bottom: 0;
                            content: none;
                            left: 0;
                            min-width: unset;
                            z-index: 1;
                            position: absolute;
                            right: 0;
                            top: 0;
                        }
                    }
                }
            }
            .img-hover-show {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                opacity: 0;
                visibility: hidden;
                min-width: 100%;
                .transition(all 300ms);
            }
            .actions-link {
                display: table;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 3;
                button {
                    background: none;
                    font-size: 18px;
                    line-height: 1;
                    color: #fff;
                    border: none;
                    box-shadow: none;
                    padding: 12px 14px;
                    .transform(scale(0));
                    opacity: 0;
                    visibility: hidden;
                    span {
                        line-height: 1;
                        display: block;
                    }
                    &:hover {
                        color: @base-color;
                    }
                }
            }
            &:hover {
                a.photo:after {
                    opacity: 0.3;
                    visibility: visible;
                }
                .img-hover-show {
                    opacity: 1;
                    visibility: visible;
                }
                .actions-link button {
                    .transform(scale(1));
                    opacity: 1;
                    visibility: visible;
                }
                .tocart.btn-cart {
                    .transform(translate(-50%, -50%));
                    opacity: 1;
                    visibility: visible;
                }
                .product-label {
                    display: none;
                }
            }
        }
        .product-item-details {
            padding-top: 11px;
            .product-item-name {
                margin-bottom: 6px;
                line-height: 1.1;
                a {
                    color: #222;
                    font-size: 14px;
                    font-weight: 500;
                    &:hover {
                        color: @base-color;
                    }
                }

Anyone help?

Answer 1

app/design/frontend/{Vendor}/{themename}/web/css/yourstylename.css

/* For the whole page content in product list*/

body.page-products .page-wrapper {
    background-color: #eaeaea;
}

/* For the whole products content in product list*/

body.page-products .products.list.items {
    background-color: #eaeaea;
}

/* For the whole products content + pagination in product list*/

body.page-products .page-main.container .column.main {
    background-color: #eaeaea;
}