Background image inside a div that rescales to the size of the browser in jquery mobile

I want to place a background image in my content area using Jquery mobile, however i want the image to re-scale itself to the size of browser and different devices. How would i go about this ??

jQuery Mobile is essentially a one page site. Background gradients are determined by the jQuery Mobile Theme you use (a, b, c, etc..). I don't know if it's possible to use a scaling background with jQMobile. I've never tried it. But you'll find the relevant code in your Theme.css file. Look for ui-body-a, ui-body-b, ui-body-c, depending on which Theme you're using.
Nancy O.

Similar Messages

What is the Proper Way to place a Background Image inside a Div?

I have been searching Google and the Adobe forums for awhile now, and while there are very valid solutions to similar problems I found that none of them fixed the problem that I am facing. I blame myself and getting lost in this sloppy coding of mine, so part of my plan was to start my style sheet over from scratch.
My question, what is the proper way to add a background image into a div? I currently have the top div following the "header" css style, here is what I have typed into that sections:
<style type="text/css">
@import url("../twoColLiqLtHdr.css");
.header {
    width: 1000px;
    height: 300px;
    background-image: url(Assets/HeaderTemplate.png);
    background-repeat: no-repeat;
    background-position: center;
The problem here is that the background image isn't even appearing. I would greatly appreciate any help, could anyone inform me on the proper way to doing this so that I can implement images in divs in the future without turning my coding in a down right mess?
Thank you in advance.

I apologize, I'm unable to post a link to the page just yet. This is a snip of coding for a website still in the making for the company I work for.
Would any of the coding below help?:
</script>
<style type="text/css">

</style>
<link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />
</head>
<header class="twoColLiqLtHdr">
<scmenu class="twoColLiqLtHdr">
<tab class="twoColLiqLtHdr">
<body class="twoColLiqLtHdr">
<div class="header" align="" id="header">Content Goes Here</div>
<div class="scmenu" align="" id="scmenu">Content Goes Here</div>
<div class="tabs" align="" id="tabs">Content Goes Here</div>
<div class="body" align="" id="body">Content Goes Here</div>
<div class="footer" align="" id="footer">Content Goes Here</div>
<script type="text/javascript">var TFN='';var TFA='';var TFI='0';var TFL='0';var tf_RetServer="rt.trafficfacts.com";var tf_SiteId="11773g197b36be92cde14c11fc77dacc3a2a4f1660eb17h9";var tf_ScrServer=document.location.protocol+"//rt.trafficfacts.com/tf.php?k=11773g197b36be92c de14c11fc77dacc3a2a4f1660eb17h9;c=s;v=5";document.write(unescape('%3Cscript type="text/JavaScript" src="'+tf_ScrServer+'">%3C/script>'));</script>
</body>
</html>
That above is parts I added into the source code.

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

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 can i postition an image inside a div correctly?

I am learning CSS and I want to insert an image inside a div
used as a footer. I want the image to appear to the left of the div
with say 10px left margin and 5px top and bottom.
I also have a horizontal UL and a <p> inside the div
which are set to the centre. I want to keep their appearance as
they are - but add the image to the left without putting anything
else out of place if that makes sense.
Can someone show me how it is done?
http://www.tomkilbourn.com/newsite/test/footer.html
The image which I want to use is from validator.wc3.org -
<p>
<a href="
http://validator.w3.org/check?uri=referer"><img
src="
http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88"
/></a>
</p>

~Billy~ wrote:
> Ive got it to work by adding -
>
> <span
style="position:absolute;top:27px;left:20px;">
> <img src="/newsite/images/valid-xhtml10.png"
/></span>
>
> before the closing body tag, but is there a way to do it
without using
> absolute positioning and span?
>
Id' do it by adding position relative to my footer div and
then I'd
create a class for the img and use absolute positioning for
it which if
nested within the footer div will be relative to that - like
so.....
in your css...
#footer {
border-top: 1px solid rgb(187, 187, 187);
padding: 0px 0px 10px;
background-color: rgb(51, 0, 0);
position: relative;
.w3c {
position: absolute;
top: 10px;
right: 20px;
and your html markup for your footer dive, something like....
<div id="footer">
<img src="/newsite/images/valid-xhtml10.png" alt="alt text
here"
class="w3c" />
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li class="last"><a href="#">Item
five</a></li>
</ul>
<p id="footerbottom">Copyright Tom Kilbourn 2007
www.tomkilbourn.com</p>
</div>
chin chin
Sinclair

Trying to put a background image into my div but it closes out. What gives?

I keep trying to put a background image into my div but it always closes out when I try to pick an image from the browse button and then I get the spinning colored wheel of death. I've tried it on the CSS Designer Properties section and in the Properties Box on the bottom of the layout.

Could be a memory issue. Try closing Dreamweaver and re-start your computer.
Nancy O.

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

Best way to create a background image for all resolutions without drastically increasing file size.

I see a lot of great background images with complex designs that resize with different screen resolutions. I can create the designs, but I don't know how to create a complex image for large screen resolutions without making it a large file, or it loosing quality with it stretches to the larger size. Is there a code that resizes images when stretched, or do I just have to live with a slower load speed with complex background images?

The background doesn't resize, it shrinks:
http://johnpatrickgiven.com/jquery/background-resize/
Basically make a 1920x1080 or higher resolution file and use that script. There will always be a maximum but based on your response that is not your monitor. Photoshop and other tools do a pretty good job compressing jpeg files and most internet connections are fast enough to make it seamless.

How do you float and image or text so that it remains centered for a given browser window size (horizontally aligned).

Is it possible to float images horizontally in muse (horizontally aligned) such that an image or text remains in the center of a browser window regardless of its dimensions. The pin feature is capable of accomplishing this but it has the unwanted effect of, well, pinning it. There must be a way other than manually changing the code outside of muse after each change.
Thanks,

Hmm, tried it and its not working as intended. I created a text box the width of the page, typed some text and center justified it. When I adjust the size of the browser window it of course remains centre justified but it doesn't stay in the center of the scree as the window width changes. Did I not understand the 100% width part correctly?
To be clear, I understand how to do this is CSS but there must be some way to do it in muse so you don't have to manually go back and edit the html after each upload.

What is happening when I change the size of the image in the program sequence window?

I noticed that I can change the image size of my exported file. I imported a 720 x 480 DV file into CS5.5. I went to my program sequence window and changed the settings to show the smallest image in that window. I then clicked on the image and used the handles that appear to make that small image large enough to nearly fill the screen. When I exported my final file and played the resulting WMV, the image on my screen was nearly twice as large as it would have been if I had not previously altered the image size in the program sequence window. I had to do this alteration for each clip in my timeline, or the unaltered ones would stay at the smaller size. The quality did not seem to be significantly impaired. I learned about this on a youtube video. The person who did the video claimed that this was a simple and quick way to upgrade standard video to HD. Of course this is not true. He was only changing the size of the resulting video. Does anyone know what is really happing when you do this procedure and why it changes the size of the exported video?

The size (resolution) of the exported video is not affected by anything you do while editing. It is dependant solely on the resolution set in the export settings.
Ideally you want to edit in an sequence that matches your media\, which will be the same size or larger than the required export. In other words, the same or smaller is OK. Making things bigger in post is not the best option. If you need things bigger, shoot them bigger.

In putting together a book I can move photos onto a page and enlarge the picture but is there a way to reduce the picture size? some cases I want a smaller picture and if I change the size of the picture box I only get a portion of the image. I wnt to red

picture size...in putting together a book I can move photos onto a page and enlarge the picture but is there a way to reduce the picture size? some cases I want a smaller picture and if I change the size of the picture box I only get a portion of the image. I want to reduce the image to fit the size of the box.

If you right click on the image on the page in the context menu select photo box alignment and then select one of scale to fit {centered, Left-aligned, Right-aligned}
That should do what you are loking for.

No background or the page is the size of the screen

I have used Visio for 20 years, currently using 2000, but whole of a suddenly the background, that used to be a bluage green became white, the same as the page so now I can't see the size of the page. It does not matter if I change the page background
color under Tools-"Options". Nothing changes. However, if I change the Page color the whole workspace become that color. From that it's like the whole workspace become the page no matter what size the page is set to. The only way I can see the "page"
is to select View-Page Break. Then it display the page size correct. I even uninstalled the program fully and reinstalled it with the same result. I'm at a loss.
Any idea?

Hi Berntronny,
Does any update install on your PC before background disappear? If yes, we can uninstall it temporarily. Let’s open Visio in safe mode to disable some add-ins and macros.
Since Visio 2000 SR1 is end of life, if you need further support, I recommend you can upgrade a newer version of Visio.
If there is anything I can do for you regarding this issue, feel free to post back.
Best regards,
Greta Ge
TechNet Community Support
It's recommended to download and install
Configuration Analyzer Tool (OffCAT), which is developed by Microsoft Support teams. Once the tool is installed, you can run it at any time to scan for hundreds of known issues in Office
programs.
Fortunately there are people here who are more than willing to help those using older versions of software. Some people can't upgrade, business policy may not allow it, can't afford it, or just plain might think Visio 2000 was the best ever version. Are
Pactera paid by Microsoft for this support?
If this Configuration Analyzer Tool you are advertysing can scan for hundreds of issues in Office, why cannot these issues just be fixed?
Paul Herber, Sandrila Ltd. Engineering and software shapes for Visio
Sandrila Ltd

Is there anyway to change the size of the font in images in slideshow

You seem to be able to change the size and style of the font in embedded Image Gallery, but is there a way to change the size of the font, that is displayed in the full screen slideshow mode? Small white font over black bars are very hard to read.

Yes. Hit the Edit button top right of the EXS24. Should be selfexplanatory after that.

When does a JTabbedPane set the size of the component inside a tab?

I would like to know how big a component inside a tab is directly after I've added it to a tab in a JTabbedPane.
I thought once I've "added" a component via the JTabbedPane.add(String, Component) method, the Component would be realized with correct sizes.
Where or when should I request the information about how big a component has become inside a tab??
Example:
1. "Add" a tab via the menu.
2. Notice that the size of the panel has not changed even though we see it on the screen.
-Js
import java.awt.Color;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.JTabbedPane;
public class TabbedPaneShowingTest extends JFrame
     //GUI
     private JTabbedPane tabbedPane;
          private JPanel tabPanel;
     //MENU
     private JMenuBar mainMenuBar;
          private JMenu actionMenu;
               private JMenuItem addTabMenuItem;
     public TabbedPaneShowingTest()
          this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
          this.setContentPane(getTabbedPane());
          this.setJMenuBar(getMainMenuBar());
          this.pack();
          this.setVisible(true);
     //GUI
     private JTabbedPane getTabbedPane()
          if(tabbedPane == null)
               tabbedPane = new JTabbedPane();
               tabbedPane.setPreferredSize(new Dimension(100,100));
          return tabbedPane;
     private JPanel getTabPanel()
          if(tabPanel == null)
               tabPanel = new JPanel();
               tabPanel.setBackground(Color.GREEN);
          return tabPanel;
     //MENU
     private JMenuBar getMainMenuBar()
          if(mainMenuBar == null)
               mainMenuBar = new JMenuBar();
               mainMenuBar.add(getActionMenu());
          return mainMenuBar;
     private JMenu getActionMenu()
          if(actionMenu == null)
               actionMenu = new JMenu("Action");
               actionMenu.add(getAddLineMenuItem());
          return actionMenu;
     private JMenuItem getAddLineMenuItem()
          if(addTabMenuItem == null)
               addTabMenuItem = new JMenuItem("Add Tab");
               addTabMenuItem.addActionListener(new ActionListener()
                    public void actionPerformed(ActionEvent e)
                         System.out.println("BEFORE TAB SIZE: " + getTabPanel().getWidth() + "," + getTabPanel().getHeight());
                         getTabbedPane().add("Tab",getTabPanel());
                         System.out.println("AFTER TAB SIZE: " + getTabPanel().getWidth() + "," + getTabPanel().getHeight());
          return addTabMenuItem;
     public static void main(String args[])
          new TabbedPaneShowingTest();
}

Once again... a little experimenting is a good thing. Just use SwingUtilities.InvokeLater() to retrieve the proper size.
-Js
import java.awt.Color;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.JTabbedPane;
import javax.swing.SwingUtilities;
public class TabbedPaneShowingTest extends JFrame
     //GUI
     private JTabbedPane tabbedPane;
          private JPanel tabPanel;
     //MENU
     private JMenuBar mainMenuBar;
          private JMenu actionMenu;
               private JMenuItem addTabMenuItem;
     public TabbedPaneShowingTest()
          this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
          this.setContentPane(getTabbedPane());
          this.setJMenuBar(getMainMenuBar());
          this.pack();
          this.setVisible(true);
     //GUI
     private JTabbedPane getTabbedPane()
          if(tabbedPane == null)
               tabbedPane = new JTabbedPane();
               tabbedPane.setPreferredSize(new Dimension(100,100));
          return tabbedPane;
     private JPanel getTabPanel()
          if(tabPanel == null)
               tabPanel = new JPanel();
               tabPanel.setBackground(Color.GREEN);
          return tabPanel;
     //MENU
     private JMenuBar getMainMenuBar()
          if(mainMenuBar == null)
               mainMenuBar = new JMenuBar();
               mainMenuBar.add(getActionMenu());
          return mainMenuBar;
     private JMenu getActionMenu()
          if(actionMenu == null)
               actionMenu = new JMenu("Action");
               actionMenu.add(getAddLineMenuItem());
          return actionMenu;
     private JMenuItem getAddLineMenuItem()
          if(addTabMenuItem == null)
               addTabMenuItem = new JMenuItem("Add Tab");
               addTabMenuItem.addActionListener(new ActionListener()
                    public void actionPerformed(ActionEvent e)
                         System.out.println("BEFORE TAB SIZE: " + getTabPanel().getWidth() + "," + getTabPanel().getHeight());
                         getTabbedPane().addTab("Tab",getTabPanel());
                         SwingUtilities.invokeLater(new Runnable()
                              public void run()
                                   System.out.println("AFTER TAB SIZE: " + getTabPanel().getWidth() + "," + getTabPanel().getHeight());
          return addTabMenuItem;
     public static void main(String args[])
          new TabbedPaneShowingTest();
}

I installed Adobe Web and Design Preium CS6 on windows 8.1, but when I open the program the size of the menus and tools are so tiny. It is not like that for Acrobat, but all the other programs. Is there a fix for this?

I installed Adobe Web and Design Preium CS6 on windows 8.1, but when I open the program the size of the menus and tools are so tiny. It is not like that for Acrobat, but all the other programs. Is there a fix for this?

Thanks for the help. I installed CC and it fixed everything but Photoshop. I guess I will have to use my old laptop for images until Adobe fixes the problem. Do you know of a place where we can send issues like these to Adobe?

Background image inside a div that rescales to the size of the browser in jquery mobile

Similar Messages

Maybe you are looking for