?
Solved

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

Posted on 2011-03-20
9
Medium Priority
?
317 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
9 Comments
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 600 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 1400 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 84

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 1400 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 84

Expert Comment

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

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

752 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