Solved

How do you change the background onload and not have it repeat

Posted on 2011-03-20
9
311 Views
Last Modified: 2012-06-27
Hey,

       I was trying to figure out how to have the background load with a new page, but also be able to position it and not repeat it...

I figured out how to load the image with the page... but I'm having trouble positioning it and not have it repeat, this is what I got so far:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; utf-8" />

  <title>Happy New Years!</title>

  <link href="./css/style.css" rel="stylesheet" type="text/css" />

</head>

<body onload="document.body.background='newyear.jpg'">

<div class="content">

  <div id="newyear" />

	<div id="leftbar">
		<p> I like... </p>
		<br />
		<a href="christmas.html"> Christmas </a>
		<br />
		<a href="stpatricks.html"> St. Patrick's Day </a>
		<br />
		<a href="newyears.html"> New Year's Day </a>
  	</div>

	<div id="main">
	
	</div>

</div>

</body>

</html>

Open in new window


Appreciate any help on this!
0
Comment
Question by:errang
  • 3
  • 3
  • 3
9 Comments
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 150 total points
ID: 35174450
CSS would be the recommended way.  http://www.w3schools.com/css/css_background.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; utf-8" />

  <title>Happy New Years!</title>

  <link href="./css/style.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
<!-- 
body { 
	background-image: url(newyear.jpg); 
	background-position: top center;
	background-repeat: no-repeat;
	} 
-->
</style>

</head>

<body>

<div class="content">

  <div id="newyear" />

        <div id="leftbar">
                <p> I like... </p>
                <br />
                <a href="christmas.html"> Christmas </a>
                <br />
                <a href="stpatricks.html"> St. Patrick's Day </a>
                <br />
                <a href="newyears.html"> New Year's Day </a>
        </div>

        <div id="main">
        
        </div>

</div>

</body>

</html>

Open in new window

0
 

Author Comment

by:errang
ID: 35174456
Hm... but I have 4 other pages, wouldn't I have to include the lil CSS bit in every page?

I thought CSS was a way to make it so that you can change multiple pages by changing a few properties in the CSS file.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 350 total points
ID: 35174473
What is meant is you can shorthand
document.body.style.background='#ffffff url(img_tree.png) no-repeat right top'
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35175653
I don't have access to your CSS file so I put it where you could see it.  Add it to your CSS file.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:errang
ID: 35175783
>>document.body.style.background='#ffffff url(img_tree.png) no-repeat right top'

That didn't work =(, I put it in the <body onload="..."> tag like the other one, was I supposed to change its location?

>>I don't have access to your CSS file so I put it where you could see it.  Add it to your CSS file

My question was, how could I change it depending on what page loaded?  Sorry, I'm a bit new at these languages, so I am not 100% sure if this is the right question to be asking.

Basically, I have the links to 3 holidays on my page, and I need the web page to load the right image based on what link was clicked, I tried using the <div> tag, but it didn't exactly work...
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 350 total points
ID: 35175816
Works for me
<html>
<head>
<script>
var imgs = [
"http://www.geekologie.com/2010/12/31/happy-new-year.jpg",
"http://www.pheemcfaddell.com/art/PheeXmasJpg.jpg",
"http://www.beloblog.com/ProJo_Blogs/kelsea/Spring%20Break.JPG"
]; // note no comma after the last
function linkImage(img) {
  document.body.style.background='#ffffff url('+img+') no-repeat left top';
  return false;
}
</script>
</head>
<body>
<a href="#" onclick="return linkImage(imgs[0])">New year</a><br />
<a href="#" onclick="return linkImage(imgs[1])">XMAS</a><br />
<a href="#" onclick="return linkImage(imgs[2])">Spring break</a><br />

</body>
</html>

Open in new window

0
 

Author Closing Comment

by:errang
ID: 35175827
Ah, sweet, thanks a lot, like I said, I put it in a body tag like in my code...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35175834
Should work:
<html>
<head>
<script>
var imgs = [
"http://www.geekologie.com/2010/12/31/happy-new-year.jpg",
"http://www.pheemcfaddell.com/art/PheeXmasJpg.jpg",
"http://www.beloblog.com/ProJo_Blogs/kelsea/Spring%20Break.JPG"
]; // note no comma after the last
function linkImage(img) {
  document.body.style.background='#ffffff url('+img+') no-repeat left top';
  return false;
}
</script>
</head>
<body onLoad="linkImage(imgs[1])">
<a href="#" onclick="return linkImage(imgs[0])">New year</a><br />
<a href="#" onclick="return linkImage(imgs[1])">XMAS</a><br />
<a href="#" onclick="return linkImage(imgs[2])">Spring break</a><br />

</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35176334
There you go, thanks for the points.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article will show, step by step, how to integrate R code into a R Sweave document
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now