Solved

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

Posted on 2011-03-20
9
313 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 83

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 83

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
 

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 83

Expert Comment

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

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

813 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

13 Experts available now in Live!

Get 1:1 Help Now