Jump to content

Centering an image overrides background image


TheRealMaverick
 Share

Recommended Posts

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.

 

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...