Background Image Error

I created an example code snippet to see how exactly to create a page that makes the image centered and the background of the page extend evenly after 1920px, the code does what I just said but it does not extend evenly when using inspect element and testing it past 1920 px. The right seems to double the left when it extends outwards. Hope someone can help with this. Should be a simple fix, just cant seem to find it.


<!DOCTYPE html>
<html lang="en">
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<body class="backgroundimgall">
        <section class="classtest">
            <div class="backgroundimg"></div>


* {
    margin: 0;
    padding: 0;


.backgroundimgall {

    background-color: black;
    width: 100%;
    height: 100rem;
    position: static;
    margin: 0 auto;

.classtest {
    width: 100%;
    margin: 0 auto 0 auto;
    border: 0.1rem solid red;
    height: 99rem;

.backgroundimg {
    background-image: url(;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background-repeat: no-repeat;
    margin: 0 auto;
@media screen and (min-width: 1920px) {

    .classtest {
        max-width: 1920px;



background-size: auto|length|cover|contain|initial|inherit;

Which of the above values for the background-size property seems most likely to work for you?

Hi @willjw3 ! i tried all of these, none seem to change the extra background space on right when at a high width. I believe the problem is with the width in “backgroundimg” because when i decrease it slightly it actually changes the extra background on the right , but I still haven’t fixed it yet.

Heres an image of whats wrong, notice the extra black background on right:

update: error was position: absolute;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.