I'm just starting to use phonegap and am having a problem displaying a background through both the body and a div. The background image I am using is the same as the splash screen, and the only difference is that the splash screen loads the image, while the css won't display it. Here is my code...
<style>
#bg {
background: url(_images/splash.png) top center no-repeat;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="bg">
Hi
</div>
I've tried adding quotes around the image url, adding and removing the "top", "center" and "no-repeat", and also tried using background-image instead of just background, but nothing is working for some odd reason. I've managed to have a background color work, just the imaging won't work.
And since I am using dreamweaver's design view/live view, I also check to make sure the image shows up before I download the app all over again to my phone.
I had the same issue with Android and Phonegap. What worked for me is setting the background-size and background-position with the image, like this:
#bg
{
background: url(_images/splash.png) no-repeat center center;
background-size: 100% 100%;
background-position:100% 100%;
}
My styles are also defined inline, I don't know think it has to do anything with the issue, but try it out.
<div style="background:url(uploads/front.jpg) no-repeat center center;
background-size: 100% 100%;
background-position:100% 100%;">
</div>
try to put your css at the end of the page.
otherwhise, open the file inside your desktop browser (don't care about errors).
if you can see the background, it's like a bug of phonegap.
if you can't see it, you've made an error (404, the file is not existing?)
I found my answer just by messing around with it. I guess the underscore in the directory name was not allowing it to work. So just in case anyone else runs into this problem, I guess avoid using underscores.
Related
I am creating a website and I define my background image in the css.
Here is my CSS Code.
body
{
background-image: url('../background_image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
This is applied to all of my pages.
It works on all desktop pages, but on mobile, it only works on the index page.
I link the pages to the css file using the following at the bottom of the head
<link rel="stylesheet" type="text/css" href="css/general.css">
All of the page files can reference the image correctly since everything works on desktop.
I have heard about a bug in the android system, but since it works on the index page on mobile, i don't think that this is it.
Thanks in advance.
Use the following format:
background-image: url('http://example.com/folder/background_image.jpg');
Turns out that the background image was being "pushed down" the page on mobile.
In my css, I had background-position: center; which centers the image on the page horizontally, but the top position was variable.
Changing this to background-position: center top; allowed me to see the background image on mobile.
I eventually changed it to background-position: center -200px; to get the desired positioning.
Thank you to everyone who helped!
I have a background image assigned via background: url(""); to the body element. Now, its a really huge image and I want to focus the view exactly on the middle.
To understand what I want to do, imagine the following: Open an image on a touch-screen device like an iPhone or any Android phone. Now, pinch to zoom in to the center of the image, and imagine that each zoom-level is a different viewport of another device.
I want a specific part of my image to always be in the center. So far, I have tried tried to use background-{size,attachment,position} but couldn't get it right at all.
My current example is at http://dev.dragonsinn.tk - and the CSS is here: http://dev.dragonsinn.tk/themes/dragonsinn/css/main.ws.php
The current image is 1920x1080, so on most screens it will center almost correctly. But my local one is 1024x786 - which looks horrible so far...
What is the needed CSS, to even make an undersized image center? I can use media queries to make it bigger later. For now, I just want to really center it.
The following centres your image and scales it for different viewports.
See this link for more info on the background-size css property.
Also see http://caniuse.com/#feat=background-img-opts for browser support.
body {
background: url("/cdn/theme/images/bg.jpg");
background-color: black;
color: white;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
I have a div which has a background property on it. The background is a url which loads fine on all computers and browsers, loads fine on Android but doesn't load on iPhone.
Here is the style for the div:
background: url('http://emergypower.com/assets/images/attraction.png');
background-position: center -90px;
height: 590px;
width: 100%;
This is custom CSS, I am not using a framework for it. Furthermore, when the user opens the "tab view" on iPhone (to see all the Safari tabs that they have open) the image displays fine, however when opened in the real browser view it does not display.
I originally did not have the width set and thought that this may have caused the problems but have since edited it and it has made no difference.
Ethaan might be right but I prefer to use background-size: 100% cover; to ensure the image is always sizing to it's container.
It think I might have three possible solutions. It might depend on which iOS version you’re testing on.
An old fix for a bug with background-image on older iOS devices was to add -webkit-transform: translateZ(0); to the element.
Some older iOS versions has an image file size limit off 2290x2290px. Is the image to big?
Adding position: relative; and background-repeat: no-repeat; might do the trick.
Try changing the background to this.
background: url("http://emergypower.com/assets/images/attraction.png");
background-size: cover
add background size
background: url("http://emergypower.com/assets/images/attraction.png");
background-size: 100% 100%;
Now, I have a website which is from my previous co-worker.
I get some issue about resizing the browser window.
In other words, I want my website to resize nicely when I resize the window, rather than having buttons, divs and all the rest to overlap and go crazy.
this is my website.
http://50.62.140.177/foxcode/index.html
What I would like to do is something similar to this say http://antobbo.webspace.virginmedia.com/photography/home.htm, you make the windows smaller and everything resizes ok.
Has that something to do with height/width/padding/margin using percentage instead?
I really don't know where to start from, so any hint or link to relevant resources would be great.
i can use chrome to check that.
open in chrome your website then click F12 for the debugger.
know in left down you got eyeglass click on it and then click where you want to change the size and in the right you can change it and see what append change on your web source..
Just add min-width: 768px; to both green divs. simple and quick
Like other people said, min-heights and min-widths.
What I would also suggest is that you use a different technique for your full-screen background image. It seems to mess up when resizing.
Try using this;
html{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
It's the best practice for full-screen backgrounds. More info from CSS Tricks.
This is just as easy as setting the html, body to auto and add a min-width of 960px
so something like:
In your header you put:
<meta name="viewport" content="width=device-width">
And in your css you do:
html {
width: auto !important;
min-width: 960px; // this depends on the width of your website, the example you provided is 960px
/*rest of code*/
}
See all the min-width options here
Hope that's it.
I'm making attempts to build a responsive site however i'm am struggling with the resizing on the two background images i applied to my site. when i view on a mobile device the header looks squashed, i presume this is become a i applied a fixed height to the header. I have tried using the property height:auto, However still no joy.
can someone point out what i'm doing wrong?
#header{
background: url(images/page_header_1024px.png) no-repeat;
background-size: 100% 100%;
max-width:1024px;
min-height: 100%;
margin: 0 auto;}
click here
Write like this :
html, body{
height:100%;
}
#header{
min-height:100%;
}
Is there a reason you're not using a standard tag? Then the browser will natively resize it - try resizing this page (just your image in it's own window):
http://thisiswired.com/responsive/css/images/page_header_1024px.png
Is that the effect you want?