HTML padding

Hello on https://artfuldigital.net/ I have some padding on all sides of the HTML element to add a textured background all around the sites

html {
background: #CCC url(https://artfuldigital.net/wp-content/uploads/2023/05/canvas-pattern2.jpg);
padding: 20px 20px 20px 20px;
height:100%;
}

For some reason I am not getting the padding on the bottom and the texture does not show.

Anyone know the issue?

Thank you for the help.
Kevin

You set the html to height:100% but your layout is much taller than 100% so the background gets cut off. You also added padding to the 100% so you have 100% + 40px padding which will give you a vertical scroll on pages that don’t need it.

Use min-height:instead and box-sizing to make sure the padding is contained within the 100%.

e.g.

html{
height:auto;
min-height:100%;
box-sizing:border-box;
}

Height:auto is the default but you seem to have defined 100% in a couple of places.

The above code will produce this:

1 Like

Thanks Paul.

That did the trick. I thought it was something like that.

1 Like

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