Question 169834 in Html Question posted in
Some basic documentation can be found here.

Does HTML-CSS background repeat space have an issue?

<!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>
    <style>
        body{
            background-image: url("any image);
             background-size: 100px;
            background-repeat: space;
        }
    </style>
    
</body>
</html>

it should fill the whole page with that picture but it only fits one row.

i changed the size to set or intial it dosent matter.and the round reapeat dosnet work too.it fils the row but it comprses like a hundred images in a col

Tags:

2

Answers


  1. 0

    If i understood your questions right , i think you want the background to fill the available space

     body{
            background-image: url("any image);
             background-size: cover;
            background-repeat: no-repeat;
        }

    the background-repeat:no-repeat will only show it once and the cover to fill all space available . Is this what you wanted to do ?

    Login or Signup to reply.
  2. 0

    You don’t have any content taking up the space. Your html tag practically has no height and the images that are showing in 1 row are overflowing. Increase the html height to 100% and the images will cover the entire viewport:

    html {
  min-height: 100%;
}

body {
  background-image: url("https://source.unsplash.com/user/c_v_r/100x100");
  background-size: 100px;
  background-repeat: space;
}
    <!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>

</body>

</html>

    Edit: Updated the html style to be min-height:100% as per @Temani’s recommendation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search