Centering an image overrides background image in HTML/XHTML Posted August 20, 2020 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.
Centering an image overrides background image
in HTML/XHTML
Posted
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.