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
background: #CCC url(https://artfuldigital.net/wp-content/uploads/2023/05/canvas-pattern2.jpg);
padding: 20px 20px 20px 20px;
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.
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%.
Height:auto is the default but you seem to have defined 100% in a couple of places.
The above code will produce this:
That did the trick. I thought it was something like that.