Solved

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

Posted on 2011-03-20
9
312 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

929 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

15 Experts available now in Live!

Get 1:1 Help Now