I'm working on a small HTML page that would include some buttons on the page. I would like to add a background image to these buttons and have the background image continue where the last one left off (plus the margin in between them).
Here is a quick mock up I made in Photoshop of what I mean by this (mock up shown on the top and the background used is shown in the bottom):
If I were to write pseudo code for to solve this problem it would probably be:
if Button and Image intersect:
Button.Background_image = Image_intersection
The HTML and CSS code that I've written for this HTML page is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Document</title>
<style>
*{
background: lightblue;
}
p{
color:Black;
}
button{
color:red;
padding: 30px;
margin-right: 50px;
border-radius: 40px;
border:2px black solid;
background-image: url('images/im.jpg')
width:50%
height:50%
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi, harum.</p>
<div class="buttons">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id quaerat dignissimos aperiam incidunt molestias officiis ullam iusto consequuntur, obcaecati impedit nemo nesciunt ratione similique cumque? Deserunt reprehenderit pariatur officiis nisi natus. Cupiditate culpa mollitia ad beatae voluptates similique quos obcaecati magnam saepe commodi quae, facilis a assumenda suscipit ab? Aut?</p>
</body>
</html>This HTML code however doesn't do what I have set out to do (shown in the mock up). How can I get around this?
