Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 02-17-2015, 12:05 AM   #1
Beta Member
 
Winter45's Avatar
 
Join Date: Feb 2015
Location: USA
Posts: 4
Default Background image in html

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>
__________________

Winter45 is offline   Reply With Quote
Old 02-17-2015, 11:06 AM   #2
Fully Optimized
 
joedaman633's Avatar
 
Join Date: Apr 2012
Location: England, Birmingham
Posts: 1,812
Default Re: Background image in html

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:
Quote:
<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:
Quote:
<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 :
Quote:
<!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
__________________
Athlon II x4 645 || 1TB 7200rpm HDD || EVGA GTX 650Ti OC || 8GB DDR3 RAM || Windows 7 Home x64

i5 4210M || 500GB Samsung EVO 850 SSD || GeForce 825M || 16GB DDR3 RAM || Windows 10 x64
joedaman633 is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 11:49 AM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0