hello,
Very new here and just ran into a problem making a webpage using html/css.
I am simply trying to set an image as the webpage background and center another image over it.
This code works for getting the background image and putting another image over it:
<!DOCTYPE html>
<html>
<head>
<title>Mark Fisher Cyberfield</title>
<style>
body {
background-image: url("https://i.imgur.com/lOXvRlF.jpg");
}
</style>
</head>
<body>
<h1 style="text-align:center;">Mark Fisher Cyberfield</h1>
<IMG SRC="https://im2.ezgif.com/tmp/ezgif-2-cd1e826696cf.gif"
</body>
</html>
However, when I try to center the IMG using the following code, it seems to override the background image, giving only the default white background:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
<title>Mark Fisher Cyberfield</title>
<style>
body {
background-image: url("https://i.imgur.com/lOXvRlF.jpg");
}
</style>
</head>
<body>
<h1 style="text-align:center;">Mark Fisher Cyberfield</h1>
<IMG SRC="https://im2.ezgif.com/tmp/ezgif-2-cd1e826696cf.gif" alt="Mark Fisher style="width:50%;""
</body>
</html>
Can anyone help me with this?
Many thanks in advance.