Centering an image overrides background image

TheRealMaverick · 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.

Utibedc · August 27, 2020

On 8/20/2020 at 3:14 AM, TheRealMaverick said:

DOCTYPE

Alright...

Use the following code.

	<!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" style="width:50%;display: block;margin-left: auto;margin-right: auto;"/>
   </body>
</html>

Sign In

Centering an image overrides background image

Recommended Posts

TheRealMaverick

Link to comment

Share on other sites

Utibedc

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity