Jump to content

Centering an image overrides background image


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...