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:
Thanks Paul.
That did the trick. I thought it was something like that.
