CSS Background image is not working properly

Question

my CSS background image isn't working and don't know how to explain it. Please help.

body, html{
   background-image: url(/img/pexels-photo-994605.jpeg);
}

This is how it looks but I only want a single image with full width and height The rest of my code is

This is the CSS

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body, html{
       background-image: url(/img/pexels-photo-994605.jpeg);
    }
    
    header{
        background-color: black;
        color: white;
    }
    
    .home a{
        font-size: 25px;
        padding: 10px;
    }
    
    a{
        color: white;
        border: solid;
        border-color: white;
        padding: 7px;
    }
    
    li {
       display: inline-block;
       padding: 20px;
       list-style: none;
    }

This is the HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mr.Beast FanWeb</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
<nav>
    <ul>
        <li class="home"><a href="/html/home.html">Home</a></li>
        <li><a href="/html/about.html">About</a></li>
        <li><a href="/html/blog.html">Blog</a></li>
        <li><a href="/html/contacts.html">Contact Us</a></li>
    </ul>
</nav>
    </header>
</body>
</html>

The home, blog, about and contact us files are just tabs now so I didn't feel the need to put them here

use CSS property `background-repeat:no-repeat;` to prebent it from repeating again — Onkar, Jan 03 '21 at 16:38

score 0 · Answer 1 · answered Jan 03 '21 at 16:39

to have an background image not repeated and only show once use:

background-repeat: no-repeat;

To have a background-image cover the whole screen/body use:

background-size and a value like contain or cover.

As example:

body {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg);
}

score 0 · Answer 2 · answered Jan 03 '21 at 16:42

*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body, html{
       background-image: url('https://picsum.photos/id/237/200/300');
       background-repeat:no-repeat;
       background-size:cover;
    }
    
    header{
        background-color: black;
        color: white;
    }
    
    .home a{
        font-size: 25px;
        padding: 10px;
    }
    
    a{
        color: white;
        border: solid;
        border-color: white;
        padding: 7px;
    }
    
    li {
       display: inline-block;
       padding: 20px;
       list-style: none;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mr.Beast FanWeb</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
<nav>
    <ul>
        <li class="home"><a href="/html/home.html">Home</a></li>
        <li><a href="/html/about.html">About</a></li>
        <li><a href="/html/blog.html">Blog</a></li>
        <li><a href="/html/contacts.html">Contact Us</a></li>
    </ul>
</nav>
    </header>
</body>
</html>

Background-size: maybe cover or contain according to your needs. I am using cover in the snippet.

CSS Background image is not working properly

2 Answers2