Tell us what’s happening:
can not seem to center img with parent element, is the issue with my background img element?
Your code so far
<!doctype html>
<style>
body{ background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-image:url(https://dynaimage.cdn.cnn.com/cnn/w_1600/https%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F180608105059-14-bourdain-unfurled.jpg);
font-family: calibri;}
Footer{
color:white;
padding: 230px 230px 230px 230px;
text-align:center;
}
</style>
<div id="main">
<h1 id="title"> Anthony Bourdain: Chef,Author,World Traveler </h1>
<div id=img-div> <img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHUupkTzuAhtQErhW8wFLEtJKYOnAzqGSM5A&usqp=CAU" alt="Anthony Bourdain" width="20%" height"20%">
<figcaption id="img-caption"> Anthony was a well traveld chef and writter. Exploring the world with a camera always giving his view on world issues along the way, And of course sampling the best cusine the country had to offer. </figcaption>
<p id="tribute-info"> <b> Anthony Michael Bourdain was born in New york city June 25th 1956, Anthony was a celebrated American Chef book author,journalist and travel documentarian who starred in programs focusing on the exploration of international culture, cuisine, and the human condition. Anthony completed his studies at the prestiges Culinary Institute of America.</p></b>
<p>
<b>T.V. NETWORKS
<ul>
<li>Food Netwrok</li>
<li>Travel Channel</li>
<li>CNN</li>
</ul>
SHOWS
<ul style="color:white">
<li>No Reservations</li>
<li>Parts Unknown</li>
<li>The Layover</li>
</ul>
<span style="color:white;"> BOOKS</span>
<ul style="color:white">
<li>Kitchen Confidential: Adventures in the Culinary Underbelly</li>
<li>A Cook's Tour</li>
<li>The Nasty Bits</li>
<li> Medium Raw</li>
</ul> </p>
<footer> <p> Anthony was a beloved Man around the world and had a profound impact on how people perceived the world around them and helped many to see the world through a differnt window to learn more about the life and story of Anthony it would be good to
<a id="tribute-link" target="_blank" href=https://en.wikipedia.org/wiki/Anthony_Bourdain>Start here.</a></p></foooter>
</div>
***CSS code**
#img-caption
{
width:400px;
}
#tribute-info
{
text-align:center;
}
#title
{
text-align:center;
}
#image
{
max-width: 100%;
height: auto;
display: block;
}
