Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 324
  • Last Modified:

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

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
errang
Asked:
errang
  • 3
  • 3
  • 3
3 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
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
 
errangAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
What is meant is you can shorthand
document.body.style.background='#ffffff url(img_tree.png) no-repeat right top'
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Dave BaldwinFixer of ProblemsCommented:
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
 
errangAuthor Commented:
>>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
 
Michel PlungjanIT ExpertCommented:
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
 
errangAuthor Commented:
Ah, sweet, thanks a lot, like I said, I put it in a body tag like in my code...
0
 
Michel PlungjanIT ExpertCommented:
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
 
Dave BaldwinFixer of ProblemsCommented:
There you go, thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 3
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now