473,587 Members | 2,316 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Multiple backgrounds

I can set/change a background with:

document.getEle mentById("photo div").style.bac kground =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?
Aug 25 '08 #1
6 3080
On Aug 25, 8:37 pm, Johan <por...@can.spa mwrote:
I can set/change a background with:

document.getEle mentById("photo div").style.bac kground =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?
Repeat that line for each div?
Aug 26 '08 #2
SAM
Johan a écrit :
I can set/change a background with:

document.getEle mentById("photo div").style.bac kground =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?
The easiest way is to use a class in the body tag

document.body.c lassName = 'back_1';
document.body.c lassName = 'back_2';

CSS :
=====
..back_1 { background: yellow; }
..back_1 div { background: url(../img/pict_1.jpg) }
..back_1 div.special { background: #282828 }
..back_2 { background: white; }
..back_1 div { background: url(../img/pict_2.jpg) }
/* and so on */
Or using a loop on elements to change :

var D = document.getEle mementsByTagNam e('DIV');
for(var i=0, n = D.length; i<n; i++)
D[i].style.backgrou nd="#282828 url(../img/pict_1.jpg)";
You can also use alternative style sheets

--
sm
Aug 26 '08 #3
SAM wrote:
Johan a écrit :
>I can set/change a background with:

document.getEl ementById("phot odiv").style.ba ckground =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?


The easiest way is to use a class in the body tag

document.body.c lassName = 'back_1';
document.body.c lassName = 'back_2';

CSS :
=====
.back_1 { background: yellow; }
.back_1 div { background: url(../img/pict_1.jpg) }
.back_1 div.special { background: #282828 }
.back_2 { background: white; }
.back_1 div { background: url(../img/pict_2.jpg) }
/* and so on */
Or using a loop on elements to change :

var D = document.getEle mementsByTagNam e('DIV');
for(var i=0, n = D.length; i<n; i++)
D[i].style.backgrou nd="#282828 url(../img/pict_1.jpg)";
You can also use alternative style sheets
Thank for your suggestions.

However, my question is how I can set/change multiple backgrounds with
javascript. I think I wasn't clear but they should appear in one div.
You can set them with css in this way:
#show {
background-image:
url("images/pict_1.jpg"),
url("images/pict_2.jpg"),
url("images/pict_3.jpg"),
url("images/pict_4.jpg");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom right, bottom left;
}
Note: it's one sigle div.

Now I want to change them with javascript.
Aug 26 '08 #4
Laser Lips wrote:
On Aug 25, 8:37 pm, Johan <por...@can.spa mwrote:
>>I can set/change a background with:

document.getE lementById("pho todiv").style.b ackground =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?


Repeat that line for each div?
They should appear in one div.
Aug 26 '08 #5
On 26 Aug., 16:06, Johan <por...@can.spa mwrote:
SAM wrote:
You can set them with css in this way:
#show {
* *background-image:
* * *url("images/pict_1.jpg"),
* * *url("images/pict_2.jpg"),
* * *url("images/pict_3.jpg"),
* * *url("images/pict_4.jpg");
* *background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
* *background-position: top left, top right, bottom right, bottom left;}
You are aware, that this is CSS3 and is currently supported only by
Safari and KHTML-based browsers?
Now I want to change them with javascript.
Basically by combining the what you posted in your original post and
here:

var theDivStyle = document.getEle mentById("photo div").style;
theDivStyle.bac kgroundImage = 'url("images/pict_1.jpg"), url("images/
pict_2.jpg"), url("images/pict_3.jpg"), url("images/pict_4.jpg")';
theDivStyle.bac kgroundRepeat = 'no-repeat, no-repeat, no-repeat, no-
repeat';
theDivStyle.bac kgroundPosition = 'top left, top right, bottom right,
bottom left';

Or by using the shorthand property as in CSS

theDivStyle.bac kground = 'url("images/pict_1.jpg") no-repeat top left,
url("images/pict_2.jpg") no-repeat top right, ...'; /* abbreviated */

(watch the line breaks)

Robin
Aug 26 '08 #6
SAM
Johan a écrit :
>
However, my question is how I can set/change multiple backgrounds with
javascript. I think I wasn't clear but they should appear in one div.

You can set them with css in this way:
??? in which navigator can you have this kind of CSS ?
(my Fx told me it is not good)
#show {
background-image:
url("images/pict_1.jpg"),
url("images/pict_2.jpg"),
url("images/pict_3.jpg"),
url("images/pict_4.jpg");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom right, bottom left;
}
Note: it's one sigle div.
and there is no image in background.
Now I want to change them with javascript.
Why for ?
because you want to correct the error ?
CSS :
=====
#show { background: url(images/pict1.jpg) no-repeat top left #ffc; }
#show.p_tr { background-position: top right; }
#show.p_br { background-position: bottom right; }
#show.p_bl { background-position: bottom left; }
#show.i_l { background-image: url(images/pict2.jpg) }
#show.i_2 { background-image: url(images/pict3.jpg) }
#show.i_3 { background-image: url(images/pict4.jpg) }

JS :
====
function chang(img, pos) {
var d = document.getEle mentById('show' );
d.className = img+' '+pos;
}

HTML:
=====

<div id="show" style="height:6 00px">
<p><a href="javascrip t:chang('i_1',' p_tr')">
pict #2 top right</a>
<p><a href="javascrip t:chang('i_1',' p_br')">
pict #2 bottom right</a>
<p><a href="javascrip t:chang('i_2',' p_bl')">
pict #3 bottom left</a>
<p><a href="javascrip t:chang('','')" >
original pict and position</a>
</div>

======== soluce 2 =============

CSS :
=====
#show { background: url(images/pict1.jpg) no-repeat top left #ffc; }

JS :
====
function chang(img, pos) {
var d = document.getEle mentById('show' ).style;
d.backgroundPos ition = pos;
d.backgroundIma ge = 'url(images/'+img+'.jpg)';
}

HTML :
======
<div id="show" style="height:6 00px">
<p><a href="javascrip t:chang('pict2' ,'top right')">
pict #2 top right</a>
<p><a href="javascrip t:chang('pict2' ,'bottom right')">
pict #2 bottom right</a>
<p><a href="javascrip t:chang('pict3' ,'bottom left')">
pict #3 bottom left</a>
<p><a href="javascrip t:chang('pict1' ,'top left')">
original pict and position</a>
</div>

--
sm
Aug 26 '08 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2680
by: RoDzZzZ | last post by:
when i try print (ctrl +p) my webpage, my printer not print the backgrounds and bgcolors of my tables.... what i need make to show the backgrounds and bgcolors in my paper when the user print the page? thankzzz
2
1517
by: Greg Locke | last post by:
Hi All I am programming MFC Visual C++ using Microsoft Visual Studio.net 2003 under Windows XP professional. I have developed some bitmaps as graphic overlays for buttons. I had trouble finding a colour for the bitmap backgrounds from the standard pallette that matched the xp beige standard button color. Managed to do this by creating one...
6
2352
by: MLH | last post by:
I have a logo image that I can paste into MS Paint as an image with clear background. Think of the logo as a black circle in a white, rectangular background. When I paste into Paint, the white back- ground can be made "clear" so it does NOT overwrite other image data when I'm pasting into an existing picture. Just the circle would appear...
0
1381
by: ghadley_00 | last post by:
Hi, Have created 2 seperate reports that have different images as backgrounds. Would like to have both pages print out as 1 print job (so duplex printer will make each report page on opposite sides of page) - I tried placeing both reports as subreports in a single report (lets call it SuperReport), but in that case the image backgrounds get...
6
1430
by: Rik Brooks | last post by:
I'm developing Web Applications with C# code behind. I have found that, because of the particular nuances of my company, I am stuck with positioning the items on the page with tables. No problem with that though. The problem is that some of the controls on the screen are displayed with yellow backgrounds and I can't figure out how to change...
1
3426
gregerly
by: gregerly | last post by:
I'm a total flash / actionscript newbie. I have a question about how to create a flash background as seen here: Adobe MAX I don't expect a detailed explanation. I'm just looking for some info on how they create the particle effects and moving backgrounds. It looks really cool but I wouldn't know where to start to create something like...
1
1679
by: alice | last post by:
I'm trying to have a background image in a div, then have several divs within that div that have black backgrounds. The problem I'm finding is that in Firefox and Safari, the first background image does not show through on the other divs, it's as if the black background takes over, and the space around it reverts to the body background, not...
1
2216
by: matturn | last post by:
Is there any way to get IE7 to render the whole viewpoint without forcing a page reload? If you set a DIV to 100% wide or high, and give it a background; that background will not be rendered if it isn't on the screen when the page loads. Scrolling to non-visible parts of the page will reveal huge blank areas. Is there any technique to fix...
2
1825
duhcoolies
by: duhcoolies | last post by:
I have a table-cell (width=!00%) with a background (BG1), and within this table-cell I have another table-cell (again width=100%) with another background (BG2). BG1 needs to be tiled horizontally only and I have achieved this. BG2 (small image) needs to be located at the bottom left corner and I dont want to tile this... I have achieved this as...
0
7915
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7843
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8205
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8339
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8220
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6619
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5712
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3872
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1452
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.