How to surround my "body" element with a background image-CodePudding

I'm a beginner-casual, web developer, I want to surround my menu with a background image, I've tried to do it by myself, but still, it's shows the default white background, can someone please help me out?

Here is my CSS script:

    body {
      background-image: url(https://www.google.com/url?sa=i&url=https://www.bonappetit.com/story/how-to-buy-coffee-beans&psig=AOvVaw2rGyzxjYnZTpqbQELy-_qH&ust=1668543336904000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCIj8h7q-rvsCFQAAAAAdAAAAABAD);
      font-family: sans-serif;
      padding: 20px;
    }

    .menu { 
      max-width: 500px;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      background-color: burlywood;
      padding: 10px;
    }

CodePudding user response：

what is the problem in here is your link, but here you have a body with an image background, you just change the image for any that you want, make sure that it is the image link or the image path

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    a
</body>

</html>

<style>
    body {
        background-image: url(https://th.bing.com/th/id/R.5e6520289b44e11a9e74363c18ce3ee1?rik=0NsMGzWCfTqnyA&riu=http://cdn.wallpapersafari.com/34/38/fNuD4F.jpg&ehk=rWygJFVz8poo+uNiEqsllRqA4jP9BCE6VYuBOMM03GA=&risl=&pid=ImgRaw&r=0);
        font-family: sans-serif;
        padding: 20px;
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        /* this is to make the image fits all the screen doesnt matter the image size, but it will cut the image
        background-size: cover; */
    }
</style>

CodePudding user response：

Thanks for the answers, I"ll just figure it out, by myself.

CodePudding user response：

Add quote " "

.menu { 
      max-width: 500px;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      background-color: burlywood;
      padding: 10px;
    }
    
    
body{
      background: url("https://img.freepik.com/free-photo/vivid-blurred-colorful-background_58702-2545.jpg?w=2000");
      font-family: sans-serif;
      padding: 20px;
    }

CodePudding user response：

The image you want to use, save it locally and you can change the CSS to `background-image: url(image.jpg);