Auto change background image in . Div

Is there a way to have the background image of a Div change
automatically.
Either at regular intervals or randomly would be fine. The
Div will be a
protected part of a template. Currently the Div is set up as:
#apDiv5 {
position:absolute;
width:970px;
z-index:4;
left: 62px;
top: 147px;
background-color: #cfba8e;
background-repeat: no-repeat;
background-image: url(../images/main-background-09-3.gif);
thanks;
Pat

thanks Murray.
"Murray *ACE*" <[email protected]> wrote
in message
news:go4fns$46s$[email protected]..
> Google JQuery....
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "Pat Jones" <[email protected]> wrote in
message
> news:go49l4$q39$[email protected]..
>> Is there a way to have the background image of a Div
change
>> automatically. Either at regular intervals or
randomly would be fine. The
>> Div will be a protected part of a template.
Currently the Div is set up
>> as:
>>
>> #apDiv5 {
>> position:absolute;
>> width:970px;
>> z-index:4;
>> left: 62px;
>> top: 147px;
>> background-color: #cfba8e;
>> background-repeat: no-repeat;
>> background-image:
url(../images/main-background-09-3.gif);
>> }
>>
>> thanks;
>>
>> Pat
>>
>

Similar Messages

How to change background images in s:application

hello!
i want to make a webside by flex4 as this web http://www.templatemonster.com/flash-cms-templates/29930.html
But i don't know how to make change background images by click and make sound when load page.
Can u help me ,please. sorry i write E not well.
Thanks so much
BUI THI PHUONG THANH- FROM VIETNAM

Hi,
please create a sink for your application inside that put your image.And apply that skin to your application on any click.
Below is the code.
Main Application
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:mx1="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            protected function btn_click(evt:MouseEvent):void {
                this.setStyle("skinClass", MySkinClass);
        ]]>
    </fx:Script>
    <s:Button label="Change BackGroundImage" click="btn_click(event);"/>
</s:Application>
MySkinClass
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    
    <fx:Metadata>
        [HostComponent("spark.components.supportClasses.SkinnableComponent")]
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage source="@Embed('image1.jpg')" smooth="true" left="0" right="0" top="0" bottom="0" />
</s:Skin>
with Regards,
Shardul Singh Bartwal

How to change background image in existing template?

Hi
Current website needs overall change in background image which is already set in template. Is there anyone who knows how to change background image in existing templates?

Make a friend with firebug & you could find yourself from where it is getting applied.
For the website you have given the background image it is using is [1] and it is getting set in css of body tag [2]. So Find the css at [3] and modify it OR replace [1] with other image with same file name.
[1]   www.hanwha.com/etc/designs/hanwha/images/bg-body.jpg
[2]
body {
    background: url("images/bg-body.jpg") repeat-x scroll 50% 0 #FFFFFF;
    color: #757373;
    font: 14px/18px Arial,Verdana,Helvetica,sans-serif;
    margin: 0;
    min-width: 979px;
[3]
/etc/designs/hanwha/...../*.css

Changing background Image of a DIV on RO

I am trying to figure out how to change the background image of a div upn Roll-Over (RO) from the users mouse.
My search thus far has led me to javascript, but if any other ideas/method are known, i have no preference for any language.
I have a horizontal menu w/ 3 divs and a single word centered inside each div. I wish to use each of these divs as buttons w/ RO effects.
To do this i wanted to try and make it so upon roll,over the bg would be replaced with a modified version of the normal bg of the div's.
css rules did not work, and i am trying JS now.
Here are some snippets of code that i have writtin and made from sources i have found online but it still does not appear to work when i test in Firefox.
Here is the addition to the <HEAD> part of my html page.
<script src="../quirksmode.js"></script>
<script type="text/javascript">
     function mouseover(id)
     document.getElementById(id).style.background="url('/images/objects/optionsBarADark.png') no-repeat";
     function mouseout(id)
     document.getElementById(id).style.background="url('/images/objects/optionsBarA.png') no-repeat";
</script>
and here is the code in the html page which is supposed to make the rollover casue the bg to change. (note that i have not added links to the text in the center of the divs yet)
     <div id="middleWrapper">     
         <div id="contentMenu">          
             <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" /> 
            <div class="contentMenuButtons" id="theID1" onmouseover="mouseover(theID1)" onmouseout="mouseout(theID1)">
                 <h1 class="contentMenuHeaders">projects</h1>
            </div>
            <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" /> 
        <div class="contentMenuButtons" id="theID2" onMouseOver="changeHeader(theID2,'1');" onMouseOut="changeHeader(theID2,'2');">
                 <h1 class="contentMenuHeaders">catalog</h1>
          </div>
            <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" /> 
            <div class="contentMenuButtons" id="theID3" onMouseOver="changeHeader(theID3,'1');" onMouseOut="changeHeader(theID3,'2');">
                 <h1 class="contentMenuHeaders">featured*</h1>
            </div>
            <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" /> 
        </div>
and here is some css for the affected class. the a, and a:hover rules are left-over from when i had the text linked.
.contentMenuButtons {
     float: left;
     height: 28px;
     width: 308px;
     background-image: url(../images/objects/optionsBarA.png);
     background-repeat: no-repeat;
     text-align: center;
     line-height: 27px;
.contentMenuButtons a {
     color: #F9FBFB;
     text-decoration: none;
.contentMenuButtons a:hover {
     color: #F9FBFB;
     text-decoration: none;
if you need anything else from the code let me know, but this is everything i have added to try and get this to work.
Any ideas?

I agre with SnakEyez :-)
Your method seems to be the long way of doing a simple roll-over menu.
Lots of examples here as well:
Basic css menus: horizontal / vertical:
http://css.maxdesign.com.au/listamatic/index.htm

How to change background image for each individual page in a template?

I've been working for hours to try to figure out how to change the background image for each individual page in a template. I have tried making a div in the body and adding a CSS and setting a background picture. Unfortunately even after I made it editable all templated webpages changed. I tried looking at different forum results which didn't really help me out. http://forums.adobe.com/message/2670005#2670005#2670005. I've also tried embeding a CSS style on the webpage instead of the external CSS which again didn't work. I'm not sure where to go from here. Is there a good video that explains this clearly. Please help. Thanks.

Adjust inline styles to suit your needs.
<li><a tabindex="-1" href="giving/index.html" class="MenuBarItemSubmenu" style="background:none; color:#FFF; background: #000;">GIVING</a>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Fix background image within div

Hello
I've done a lot of research about this, and tons os answers have come up, still, none solved my problem so far.
I'm trying to make the background image within a div to be fixed when i scroll vertically.
Have a template made, in which the only editable div is the rightdiv. (in red, to be easier)
Here's my code
CSS
body {
margin-top: 0px;
margin-bottom: 0px;
background-position: center center;
background-image: url(../Images/bgdr.jpg);
background-repeat: no-repeat;
#wrapper {
height: 875px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
#header {
background-repeat: no-repeat;
clear: none;
float: none;
height: 214px;
width: 1000px;
background-image: none;
position: relative;
padding-top: 10px;
#leftDiv {
clear: none;
float: left;
height: 500px;
width: 245px;
position: relative;
text-decoration: none;
#rightDiv {
clear: none;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;
#footer {
height: 100px;
width: 1000px;
clear: both;
position: relative;
padding-bottom: 20px;
And here is my HTML

<div id="rightDiv" style="background-image: url(Images/informacao.png)">
</div>

Well, thing is that on Internet Explorer 9, the background image will repeat vertically when i scroll vertically. On Chrome it will stay fixed on scroll (and that is what i want).
I tried adding style="background-attachment:fixed" , but that will make the image align fix itself relatively to the whole page, not the div only. Also, it repeats itself 4 times to oocupy the screen. I can solve that by "no-repeat", but it still is fixed to the browser page, not the div.
I've been trying to fix this for days.. Help would be much appreciated.
Funny thing is that this only happens in IE9.. Chrome works perfectly.

DevilUrd wrote:
Didn't work. sorry, but i don't think i understood ur reply quite well..
Here's what i used:

<div id="rightDiv" background: url('Images/informacao.png') no repeat fixed;>
<tr>
<td>textextextextextextextextext</td>
</tr>

Could u pls be a little more detailed?
sorry, but i'm still very unexperienced at this..
That is not a valid way to write css into your page and will not work. You appear to be trying to use the background shorthand css property within the html tag itself. If you want to use an inline style, it would need to be within the style html attribute...
<div id="rightDiv" style="background:url(Images/informacao.png") no-repeat fixed top left;">
But it would be better to place it in your css instead...
#rightDiv {
clear: none;
background:url(Images/informacao.png") no-repeat fixed top left;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;

Background image fill div, text with padding

I have a div set up with a width of 182px, and the padding is T:15 R:10 B:15 L:20. The text in the div works with these parameters, but when I add my background image (a bar of color) also 182px, it does not fill the div, only about 75% of it. I'm learning as I go, so any advice would be appreciated.

gregjb wrote:
I have a div set up with a width of 182px, and the padding is T:15 R:10 B:15 L:20. The text in the div works with these parameters, but when I add my background image (a bar of color) also 182px, it does not fill the div, only about 75% of it. I'm learning as I go, so any advice would be appreciated.
Padding is added to the dimensions of the <div>. So your <div> is really 182px wide plus padding left and right 30px = 212px
So your background image needs to also be 212px wide.
HOWEVER if you do want your <div> to only be 182px wide set its width to 152px wide to take into account the padding.

div drop shadow hidden behind background image of div below

I am trying to show the <div navigation> drop shadow on top of the <div mainImage> background image. How can I fix the css to show it on top of the bar picture? Here is the site in progress... http://cishenanigans.com/index2012.html
Thanks!

You should use z-index. But this works only on absolute or relative positioned elements.
In your case, replace this:
#mainImage {
margin: 0px;
padding: 0px;
height: 300px;
width: 1020px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/mainImage.jpg);
to this:
#mainImage {
margin: 0px;
padding: 0px;
height: 300px;
width: 1020px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/mainImage.jpg);
position: relative;
z-index: -10;
That should do the trick

User in unable to change background image/theme

Hello,
I am currently working with a user who is unable to change is background image it only shows a black background. He is currently on Windows 7 Enterprise Edition
We have tried the following troubleshooting steps:
1. Ran full system scan with no results
2. Ran sfc /scannow
3. Ran diskchk
4. Copied over new TranscodedWallpaper.jpg
5. Checked Power Options - Checked desktop background settings - expaneded slideshow and made sure Plugged in option is set to Available
6. Checked that Remove Background images is not selected in Ease of Access Center
We go not have a group policy set to disable the changing of the wallpaper and he is the only user with this issue.
Any assitance would be greatly appreciated. Source:
https://support.microsoft.com/en-us/kb/2504610
Thank you,
Sunny

Hi sshah210,
Try this registry key method .
Navigate to the following path :
HKEY_CURRENT_USER\Control Panel\Desktop\Wallpaper
Choose a picture path and configure it .
If the issue persists , I agree with S.Sengupta.We can create another account to have a check .
Best regards
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact [email protected]

Can't change background image

Hi guys
I am using NWBC for desktop 4.0 and can open transaction UI5/THEME_DESIGNER and all is great.
2 issues though
1. when i navigate top my index page (as a copy of sap corbu) i click on background image and I get the popup with the 2 squares (one for + image and one for 'No Image' I drag a gif or a jpg file to the + square and I get error "File Reader undefined"
2. I can change the background colour, text colour etc and save as draft and then publish - the publish seems to work (get green tick and sucess message) and then i enter THEME_NAME in the NAME field of table NWBC_CFG and then in the VALUE field I enter Copyofsap_corbu (which is the THEME_ID i see on the publish popup but on restarting I don't see any background colour change or anything.
Am i missing something here ???
Many thansk in advance

Dear Silvia,
That note released just 1 month before I think. And that solved my problem.
Actually there are some other notes also we implemented prior to this note.
Here I will copy paste some imp conversation from SAP Support Team. Hope it helps to you.
"we strongly recommend to implement the latest notes for the UI theme
designer, please see SAP Note 1852401.
In your system the version 1.2.0 of Theme Designer should be updated
to version 1.2.2 . Please implement the Note 2010406.
After implementation of the note, please try again to load NWBC
Previews."
"As I thought the NWBC previews pages have a small issue which was
corrected in SP09 ( your system is currently on SP08 -
SAPK-74008INSAPUI). For this reason the parameters for NWBC pages
could not be loaded in theme designer and you see quick and expert as
empty."
"please apply note 1986795 once it is released. This should fix your
issue."
"I found the weak part in the code that is responsible for truncating
the theme data and created a correection for that. SAP note: 2051350
Please import this note into your system and then rerun your scenario.
If this does not solve the scenario please feel free to reopen this
message."
" update the note 2051350 and added the manual activity of
creating a data type in transaction SE11 according to the screenshot
that you attached."
"Please download the note in its new version 2, process the manual
activity, and then import the automatic code correction of the note."
"could you please implement the note 1990723 into your system and
retest it again.
If you still should experience problems re-open this message."
"We try to find a problem and give you a solution asap, but in your
scenario are involved more as one software component ( ABAP, SAPUI5,
ThemeDesigenr, NWBC, etc.) which should coordinated and works
together. Moreover the individual setting in your system bring more
complexity what needs a time. Sorry for that.
The problem for a now is obviously somewhere in HTTP Configuration,
instead of cache token the system send in a background the logon page
(see attachment).
And I would like to ask you to implement again one note 2021480."
0001036616   Netviewer support sessions
0001852401   UI Theme Designer for SAP NetWeaver AS ABAP (main SAP Note)
0001986795   Use Company Logo in NWBC from Theme
0001990723   ABAP method call /UI5/CL_THEME_UTIL=>SEND_GET_TO_SAME_HOST() takes very long
0002010406   UI theme designer for ABAP: Version 1.2.2
0002021480   Start of Fiori Launchpad or NWBC takes very long when using a custom theme
0002051350   NWBC configuration: Theme parameter is truncated
Regards,
Namsheed.

MUSE - Rollovers change background image

I want to create 4 button (image thumbnails) that, when you rollover them, the page's background image changes (the background images are different to the thumbnails). And when you rollover a different thumbnail, the background image fades into a different image (again, different to it's thumbnail).
Does anyone know how to achieve this? Ultimately, I'd also like the background image to scroll at a different rate to the thumbnails.

You can use compositions for this where the triggers can be configured with image for different states and target container should be large enough to cover page area , so that when thumbnail is hovered then that specific target will appear thus page background change.
Thanks,
Sanjit

Changing background image of web-page

I'm having problems changing the background image on the web-page. I want to use a custom image (one which I own.) But when I use the Page Inspector function to change it - it only changes the bottom half of the page with my custom image. The top half is the original iWeb template. I've tried adjusting the page size numbers, but the image simply does not move up! What's up with that? How can I change the entire background of the page to use my custom image? I feel like it should be a lot easier than it seems.

The Darkroom is one theme that can't be user modified. You would be best served to create a blank page in the Darkroom theme, make a screenshot of the background w/o the spotlight in the center (a slice about 800 x 50 pixels would work well) and use it for the browser background in the Black theme so you get the white/light color navbar text.
Happy New Year

Background image in a div?

I know how to use css to place a background image inside a
div. However, I would like that image to be contextual, and be
differrent depending what the current page is. As an hypothetical
example, I would like a non-repeating background image of an apple
inside <div class="content"> when the page apples.html is
open, but then an image of a banana would be the background image
inside <div class="content"> for bananas.html.
If there is a way to place background images on the fly,
directly in the html, that would be the better solution for this
novice.
Thanks for any help!
r

Do it this way -
<style type="text/css">
div.content { background-repeat:no-repeat; }
#apples div.content {
background-image:url(/images/apple.jpg); }
#banana div.content {
background-image:url(/images/banana.jpg); }
</style>
(put this in the head of each page (or put the rules into a
site-wide
external stylesheet)
Now, on the apples page, change this -
<body>
to this -
<body id="apples">
and on the bananas page, change it to this -
<body id="bananas">
Get it?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Sbisa" <[email protected]> wrote in message
news:ffqvhs$5q6$[email protected]..
> Thank you!
>
> I will give it a try. I am googling for tutorials on
this, but if anyone
> has one in their pocket that they could share, much
appreciated.
>
> r

How to change the background image on IP Phone 8861

Hi Concern,
I face some problem on changing background image on IP Phone 8861. I prepare
.png file as per below doc.
Full size image - 800 pixels (width) X 480 pixels (height).
Thumbnail image - 159 pixels (width) X 109 pixels (height).
http://www.cisco.com/c/en/us/td/docs/voice_ip_comm/cuipph/8811_8841_8851_8861/10_5/english/adminguide/P881_BK_A92A3B94_00_adminguide-8811_41_51_61-10_5/P881_BK_A92A3B94_00_adminguide-8811_41_51_61-10_5_chapter_01010.html#P881_RF_C8927D88_00
I upload the png and List.xml on cucm 10.5 as per above doc.
List.xml Example
<CiscoIPPhoneImageList>
<ImageItem Image="TFTP:Desktops/800x480x24/TN-Fountain.png" URL="TFTP:Desktops/640x480x24/p1-800X480.png"/>
<ImageItem Image="TFTP:Desktops/800x480x24/TN-FullMoon.png" URL="TFTP:Desktops/640x480x24/p2-159X109.png"/>
</CiscoIPPhoneImageList>
Now i go to phone set and check new background picture not shows it says "no wallpaper server" something like that.
Please help on the issue.
Thanks
Afzal

Hi Jaime,
Thanks is done ..
On dx650 phone background change is same procedure or different.
File size is different i know but list.xml is same or different ?
Or i can upload only one list.xml file just line add for dx650 phone.
Thanks
Afzal

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

Auto change background image in . Div

Similar Messages

Maybe you are looking for