background image in a div that resizes to the size of the mobile browser in jquery
I want to place a background image in my area of content using Jquery mobile, but I want image re - happen to the size of the browser and different devices. How could I go about this?
jQuery Mobile essentially is a one page site. Background gradients are determined by the jQuery Mobile theme do you use (a, b, c, etc...). I don't know if it is possible to use a scale with jQMobile. I have never tried. But you can find the code in your Theme.css file. Look for the ui-body-a, b-body-ui, ui-body-c, depending on the theme you are using.
Nancy O.
Tags: Dreamweaver
Similar Questions
-
Image rollover nav div swap develops in the mobile platform.
CS6, MacPro DW
Sidebar, "navMenu" ID, "COMMANDER PARTS" and "After Hours" Nav button seem to add padding in a mobile environment. The "After Hours" button to add more than the other.
The background image is exactly the same size. (Photoshop, layers, a single file)
I did not use "H" tags, line height, so not a problem.
Only difference is an all caps, other is mixed case.
Look at the test site:
http://02ca0d2.netsolhost.com/action_appliance_02/pages/order_parts.html
Thanks in advance,
Joe Satterwhite
SatGraphics
Your html width and height are part of the substitution of your css.
Try to remove the width = "175" height = "42" of the image nav_order.jpg in the html code.
Which should allow the css to regain control.
-
Make a background image of a DIV elastic?
I try to get the background image of one div to resize when the browser text display rises or falls.
There's a big announcement at http://jontangerine.com/silo/css/elastic-layout/ which gives many details on the layouts of elastic and addresses resizing of the images on the page to see his example in http://jontangerine.com/silo/css/pixels-to-ems/
However, it has not worked for me when I tried to apply it to the background image. Anyone know the code for this?
Thank you.
egigharbor wrote:
Zoom the page without problem - it is the text based on the browser does not accept my image to enlarge proportionally sizing. I know that there is a way because I tried on http://jontangerine.com/silo/css/pixels-to-ems/ and its images increase with the text.
For some reason I struggled to make it work in my banner.
OK... you're asking for trouble and opening a Pandora's box... but what you can do is insert the image and remove the width and height attributes. To resize the image as page zoom in and out... willingness to work in some browsers, not all (eg. works in FF, but not IE6). Be aware though that, as the image magifies, rasterization will be put in... zoom isn't so bad... like compresses just of the image.
-
What is the way to place a background Image in a Div?
I searched Google and Adobe forums for a while now, and although there are very valid solutions for similar problems I discovered that none of them fixed the problem that I am facing. I blame myself and get lost in this encoding sloppy mine, so part of my plan was to start my stylesheet from scratch.
My question, what is the right way to add a background image in a div? I currently have the div albums following the css style "header", here's what I typed in this section:
< 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 is not still appear. I would appreciate help, could someone inform me on how to do this so that I can implement images in div in the future without turning my coding in a bottom right mess?
Thank you in advance.
Try changing it to:
background-image: url('Assets/HeaderTemplate.png'); Also make sure you have the case appropriate for file names: for example
Assets = active
HeaderTemplate = headertemplate
etc etc.
Sometimes these things create problems.
Good luck.
-
Is it possible to pin a background image for (android) Tablet, that it doesn't matter what I do
Hello
I believe you are trying to locate the image in the layout of tablet or phone.
Due to lack of support on some browsers and Smartphones, pinning is disabled in Muse for Tablet and smartphone layouts.
You can see this feature in future versions of Adobe Muse.
You can use the scroll effect to achieve this as a solution.
Select your items you want "pinned" and open your scrolling check Motion Control Panel the check box for the movement and the value of all the values to zero.
Here is the screenshot for help.
Concerning
Vivek
-
Problem with the clone stamp and Healing brush, as soon as I use them I get a second image duplicated on top that move with the tool
You're apparently talking about Photoshop, so I'll pass this on Photoshop beginners forum.
-
Background image in a div?
I know how to use css to place an image of background inside a div. However, I want to be contextual and differrent depending on what the current page is that image. As a hypothetical example, I would like a background image of an Apple inside, no repetitive < div class = 'content' > when the apples.html of the page is open, but then a picture 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 code, it would be the best solution for this novice.
Thanks for any help!
rDo it this way-
div.content { background-repeat:no-repeat; }
#apples div.content { background-image:url(/images/apple.jpg); }
#banana div.content { background-image:url(/images/banana.jpg); }(This put in the head of each page (or put rules in a whole site)
external style sheet)Now, on the Apple page, change it.
on this subject.
and on the page of bananas, change it to-
Get it?
--
Murray - ICQ 71997575
Adobe Community Expert
(If you * MUST * write me, don't don't LAUGH when you do!)
==================
http://www.projectseven.com/go - DW FAQs, tutorials & resources
http://www.dwfaq.com - DW FAQs, tutorials & resources
=================="MEPE"
wrote in message
News:ffqvhs$5q6$1@forums. Macromedia.com...
> Thank you!
>
> I will he give a try. I'm Googling for tutorials on this subject, but if anyone
> has one in their pocket that will allow them to share, very much appreciated.
>
> r -
I have an image psd file in photoshop cc 2014 the layer background transparent. I wanted to convert to vector. The best option I've seen was converted first to a smart object in photoshop by layer-> Smart objects-> convert to smart object. then he exported a CPS. Then I opened the file in illustrator and applied image tracking tool, but the background transparent got converted to white but I had the option to skip white up to 16 trace of color. But in the case of Conversion of high fidelity, the option do not know white is not available, what do I do now?
After using the Trace of the Image and expand the result, just find a part that is filled with white and use Select > same > fill and just delete.
-
Background image of a slide that appear in all the slides after and I can't remove it
Hello
I am changing a course created with Captivate 5, Captivate 7 and for some reason any background image slide 35 appeared in all the slides after one and I can not remove. The most interesting thing is that when you look at the film slides, they are different (like the original) than on the workspace that contains the background image, I'm trying to delete (screenshot below).
Ideas or comments?
Thank you.
You can check the accordion of Timing (not visible on the screenshot)? There may be value to display for the rest of the project?
Or is the image on the master slide used for other slides?
-
Background image doesn't show is not in the model
I created a .dwt that has a background image. When I create a new file from the model that the background image is displayed in the preview in the dialog box new file, but when I open the background image is not there, and if I try to set a background image, it indicates that the background image is not editable. Clues as to what is happening? DW 5.5
And that's your problem. It all starts at the Template.dwt level.
Paths to property should never point to the FILES on your local hard drive that no one can see it but you.
background-image: url (file:///MacBook Pro/Users/markbau/Desktop /markbau.net/paper_texture.jpg);
Most likely, the path to the Template.dwt file should be higher than the model default folder a folder.
URL (.. / paper_texture.jpg);
Nancy O.
-
How can I insert images of full-width that reach until the edges of the browser window?
I would like to insert pictures full-width that reach until the edges of the browser window. When I try to do and break the boundaries of the image to the absolute limits of the page in edit mode, you can push the image back to the borders of the body in preview mode.
I can do rectangle normal blocks full-width, but no pictures.Who can help me?
- Create a box, and then click the '100% width' along the menu bar icon to define your area to scale to the width of the browser.
- Import an image in the box using the parameters shown in the second picture,
-
How to create a navigation that resizes with the browser window
Hello
I came across this site http://www.smetana.net/. Inside the navigation components resizing with the change of size browser window, but the content remains the same size. I would like to build something similar for my site but I don't know how it's done. I'm willing to work, but I need a direction
Thank you
Ravital
The following links are for the tutorials dealing with various aspects of the Flash design Adaptable fullscreen
http://www.tutorio.com/Tutorial/liquid-Flash-layout
http://www.gotoandlearn.com/play?ID=31
http://www.developphp.com/Flash_tutorials/show_tutorial.php?TID=128
-
Two weeks ago, as Firefox was normal and kick ass as usual. Then I realized that Firefox has changed-when you do things in a tab for a particular Web site you're browsing, Firefox now this thing annoying hella where it hides see your other tabs to work and "optimize" your notice on the Web site. There used as an orange button that says Firefox at the top left that had a drop down menu of commonly used functions, like the Download Manager and bookmarks. It was all super convenient. It was bright, noticeable and all the tabs that I worked with were visible at the same time. Now, what happens is, if you go to the top of a tab for a Web site that you look at, it 'unmaximizes' window and reveals once-hidden tabs, which is WICKED STUPID because it does that change the orientation of the web page so that the link that you were once to reach is now outside the trajectory of your mouse What causes epilepsy inducing madness of the glitter of the page; not to mention that it kills the time to redirect your mouse because of a characteristic that is not even help what it is. Personally, I use a computer to work, not to be entertained, as the majority of porn watching freaks of nature on this thing. It should just be something that you can turn off easily. Sorry to be so angry, but I thought that maybe I could get used to it, and it's frankly just one of the more nauseating functions on any piece of software I've ever met. Thank you!
Looks like you have the mode full-screen (which was always in Firefox). Press F11 on your keyboard. How to make Firefox and Web sites go full screen
-
Friday night, from my laptop, I clicked on a site that I wanted to and he says "for mobile", but the site came to the regular format. Today, all the sites like aol and facebook Firefox seem to be adapted to the phone application. How it reconfigured to laptop?
Try to clear your cache and your cookies.
Note: This will be you temporarily disconnect all sites, you're connected to.
To clear the cache and cookies to do the following:- Go to Firefox > history > clear recent history or (if no Firefox button is displayed) go to tools > clear recent history.
- Under "Time range to clear", select "all".
- Now, click the arrow next to details to toggle the active details list.
- In the list of details, see the Cache and Cookies and uncheck everything.
- Now click the clear now button.
This solve your problems? Please report to us!
-
Difficulty in div background image
Hello
I did a lot of research on this subject and answers os tons were developed, yet, none has solved my problem so far.
I'm doing the background image in a div that will be fixed when I scroll vertically.
Have a model manufactured, in which the only editable div is the rightdiv. (in red, to be easier)
Here is my code
CSS
{body
margin-top: 0px;
margin-bottom: 0px;
background-position: Center;
background-image: url (.. / Images/bgdr.jpg);
background-repeat: no-repeat;
}
{#wrapper}
height: 875px.
Width: 1000px;
margin-right: auto;
left margin: 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 code
<!-InstanceBeginEditable name = "RightDiv"->
< div id = "rightDiv" style = "background-image: url(Images/informacao.png)" >
< / div >
<! - InstanceEndEditable - >
Well, it's that on Internet Explorer 9, the background image repeats vertically when I scroll vertically. On Chrome it will stay fixed on parchment (and that's what I want).
I tried to add style = "" background-attachment: fixed ", but that branding will match difficulty itself relatively to the entire page, not the div only." In addition, she repeats 4 times for oocupy the screen. I can solve that by "no-repeat", but it is always attached to the browser page, not of the div.
I tried to solve this problem for days... Help would be very appreciated.
Funny is that this only happens in IE9... Chrome works perfectly.
After a little research, I found it's actually "mode of operation" in Internet Explorer, all versions. A fixed background image goes out the window of the browser for positioning.
The work around is to place a div container around the div scrolling. Place the background image in this div without css positioning container or an attachment and turn off a background image or color in div scrolling.
Something like that...
your content here
Maybe you are looking for
-
Audio books will sync with how long I read in the e-book?
Kindle ebooks and audiobooks will be synchronized? Will be Apple to do the same thing?
-
HP deskjet ink andvantage 1515: driver problem
I have problem when I got the printer driver installed... it is working correctly but... after I stop my leptop. and turn it back on it, I'm trying to print driver error....... so I have to reinstall the driver on my OS... How to solve this problem p
-
free sc card recovery software
Microsoft has a free SD card recovery software utility, or is there a product of good "shareware".
-
BlackBerry smartphones clear Messenger history
Hi people! I have just returned from a tour of BB (which works on a BES) and want to ensure that there is no trace of my BlackBerry Messenger conversations. How can I do?
-
TabTip.exe does not start in the default desktop
Separated from this thread. Same here, please please share your knowledge. Thank you! I can start cmd.exe in another desktop computer and run other programs there. However, tabtip.exe is still running in my old office...