Background image in html

Winter45

Beta member
Messages
4
Location
USA
I am very new to Html and have been working on a web layout page for a couple hours. I am trying to put a background image on my web layout page, underneath the text. The background image ends up above my web page. For example: The browser creates more space above my writing and the image ends up above the text. When the image ends up above the text all my writing and titles are at the bottom of the page. I have tried to research and figure this out for the past hour, but cant find anything.Could someone give me a hand?

Here is my code. It looks different from when I have it in notepad I guess from copy and pasting it, there are less spaces in my actual copy. You can see after<head> where I tried to insert the background image. I want the image underneath the text. The problem isnt that the image is covering the text. The problem is that whenever I publish this the image is at the top of the page away from the text.


<!Doctype html>
<html>
<head><img background src="http://www.artistsbooksonline.org/images/a/atoz/fullres/atozEd1Ob1_fr_0002_00.jpg"
<p><img src="http://www.dragonsearchmarketing.com/wp-content/uploads/2013/07/world.jpg" width="180" height="120" alt="Our Company's Photo"> <img</p>
</head>
<body>
<strong>Worldwide News</strong> <p>Recently, we have taken part in teaching society new information. We are based on loans from
the state and are foremost a public sector. Recent news and the state of current politics is what our company specializes in."We"
look forward to your visitation.</p>
</body>
<p><Strong>Where we are located</Strong></p>
<p> We are located in Charlotte, North Carolina P.O Box 8434, 23 West Avenue</p>
<p><strong>What type of news do we specialize in?</strong><p>
<p><img src="https://synthesio.com/corporate/wp-content/uploads/2010/10/Infography-Top10_most_popular_topics.png" width="300" height="110" alt="Our Company's Photo"> <img</p>
<ul>
<li>Executive Branch and Foreign Affairs</li>
<li>Democrat and Republican partys</li>
<li>Hollywood and Media</li>
<li>Biotechnology News</li>
<li>Extremist Groups and Public Safety</li>
<p><strong> Try out our sponsor search engine today</strong></p>
<p><a href="http://www.startpage.com">Startpage Search Engine</a></p>
<p><img src="http://www.corporatecreations.com/images/ComputersLogo.gif" width="160" height="120" alt="Our Company's Photo"> <img src="http://static5.businessinsider.com/image/5130e369ecad04774c00004e/barack-obama-i-am-not-a-dictator.jpg width="160" height="119" alt="Our Company's Photo"<img><img src="http://centralasiaonline.com/shared/images/2011/07/20/imu2.jpg" width="150" height="110" alt= "Our Company's Photo"> <img</p>
<p><strong> Leave comments or questions below</strong><p>
<p><form action="contactus.php" method="post">

<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>

<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual"> Asexual</p>

<p><input type="submit"></p>

</form>
</html>
 

cb600fshornet

Fully Optimized
Messages
2,190
Location
England, Birmingham
You have to put it as a style, like I've pasted below. Probably best to create a separate style sheet for the html document to reference, but the code below will do the job! As you can see, I've deleted your line:
<img background src="http://www.artistsbooksonline.org/images/a/atoz/fullres/atozEd1Ob1_fr_0002_00.jpg"

and then I created the following at the top of the code:
<style>
body
{
background-image: url("http://www.artistsbooksonline.org/images/a/atoz/fullres/atozEd1Ob1_fr_0002_00.jpg");
}
</style>

The complete code would look something like this, I haven't resized your image, I'll let you figure that bit out ;):
<!Doctype html>
<html>

<style>
body
{
background-image: url("http://www.artistsbooksonline.org/images/a/atoz/fullres/atozEd1Ob1_fr_0002_00.jpg");
}
</style>

<head>
<p><img src="http://www.dragonsearchmarketing.com/wp-content/uploads/2013/07/world.jpg" width="180" height="120" alt="Our Company's Photo"> <img</p>
</head>
<body>
<strong>Worldwide News</strong> <p>Recently, we have taken part in teaching society new information. We are based on loans from
the state and are foremost a public sector. Recent news and the state of current politics is what our company specializes in."We"
look forward to your visitation.</p>
</body>
<p><Strong>Where we are located</Strong></p>
<p> We are located in Charlotte, North Carolina P.O Box 8434, 23 West Avenue</p>
<p><strong>What type of news do we specialize in?</strong><p>
<p><img src="https://synthesio.com/corporate/wp-content/uploads/2010/10/Infography-Top10_most_popular_topics.png" width="300" height="110" alt="Our Company's Photo"> <img</p>
<ul>
<li>Executive Branch and Foreign Affairs</li>
<li>Democrat and Republican partys</li>
<li>Hollywood and Media</li>
<li>Biotechnology News</li>
<li>Extremist Groups and Public Safety</li>
<p><strong> Try out our sponsor search engine today</strong></p>
<p><a href="http://www.startpage.com">Startpage Search Engine</a></p>
<p><img src="http://www.corporatecreations.com/images/ComputersLogo.gif" width="160" height="120" alt="Our Company's Photo"> <img src="http://static5.businessinsider.com/image/5130e369ecad04774c00004e/barack-obama-i-am-not-a-dictator.jpg width="160" height="119" alt="Our Company's Photo"<img><img src="http://centralasiaonline.com/shared/images/2011/07/20/imu2.jpg" width="150" height="110" alt= "Our Company's Photo"> <img</p>
<p><strong> Leave comments or questions below</strong><p>
<p><form action="contactus.php" method="post">

<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>

<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual"> Asexual</p>

<p><input type="submit"></p>

</form>
</html>
Hope this helps

-J
 
Last edited:
Top Bottom