I am working on a hybrid HTML5, Jquery Mobile application using phonegap. I am currently having an issue with a background image I set using CSS. I have a CSS class (bPage) that sets the background image and color and all that and it seems to work right. The issue is when you navigate to a page that requires scrolling. Because the image is set to be in the center it moves to the center of the page, which is great. The problem is that the page loads with the image in the spot of the previous page and then it jumps to the middle. I want to make it move the image before the rest of the page loads so that it doens't look like the background jumps last in the page loading. Both pages have the class bPage on them and it is working correctly, except for the jumping. I assume that there is a way to force this to load earlier or something but have not been able to find a way.
Here is my bPage CSS code:
.bPage{
background-color: #6c6d6f;
background-image: url(../img/Backgrounds/Background.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center;
}
Thanks in advance!
Related
This is for a hobby/browser sim game site. I am wanting to put an animated gif in the background of the page in place of a static background photo. The image is very simple, it's just a static image with a fog overlay playing on loop. I uploaded it via Imgur, which gave me an .mp4 link. I put it in the code and it displays properly for me on Safari when I look at it. But on Chrome/Firefox/Edge and everything else it won't show.
Here it is:
html {
background:
URL(https://i.imgur.com/REDACTED.mp4) fixed center top,
background-size: cover;
}
As I said it works on safari. But it doesn't work anywhere else. I know I'm not doing something right, but I'd really like for it to show the gif/mp4 file on other browsers too. Is there a fix for this?
This particular page that I am putting this into does not have an HTML box or a JS box. Only a stylesheet one. Again this is for a hobby site. So it comes with its constraints. Is this doable?
I figured out a solution. I just found a place to host the image as a .gif without making it smaller dimensions or lesser quality. Google Photos offers this option, so I hosted it through there.
i have a background in the body, in my web page when it loads,but when it loads
it comes like a white flash behind the background.I know there was a way to fix that with the dreamweaver but i dont know hot to fix it from css or direct in the html page.
but still the white flash comes when it loads.
how to fix it ?
thanks
It sounds like you should set a background-color which would be shown before the image is loaded.
In Dreamweaver, you should see it next to the Background Image option
In CSS, that would be: (note black is #000000)
background-color: #000000;
background-image: url("path/to/image.jpg");
Or, in shorthand form:
background: #000000 url("path/to/image.jpg");
I would recommend using an image editor/color picker to get the main color used in your image.
This question may also help: Changing the colour of background behind image css
I am using lightbox to display the large versions of multiple thumbnails on this website.
So the best way to describe my problem is to follow this steps below.
Click the second image - notice it loads with a width of 100%
Close the image and click on the first image followed by clicking on the right arrow to display the second image.
Notice how the width of the previous image is retained making the second image (after clicking next) is very small.
I imagine its a css / js issue any help would be much appreciated.
It is a css problem probably caused by bootstrap,
if you are using bootstrap add this line in your lightbox.css.
.lb-image{ max-width: inherit; }
Cheers!
I've created a web page, and it has 7 six sections with huge background images using background-size: cover;. It works fine in all browsers except Google Chrome (All versions/All platforms). When I try scrolling the page in google chrome or click on its links (which they also scroll the page using $.scrollTo) the page gets choppy and laggy and it scrolls slowly and uses 100% CPU.
I've uploaded the page so you can test it: http://baaemail.com/beta (I'll remove the page later). Even IE9/10 is fine, but chrome gets choppy.
The page has several "scroll" events bound to it and I have tried disabling the javascript altogether but it doesn't get better so its not from the scroll events.
I'm using background-size: cover because it shapes the photo exactly like I want it to and I want the image to be fixed that's why I can't use other methods like using img tag instead of backgrounds.
What should I do?
thanks.
A solution I found for myself for a website with similar behaviour was to add background-repeat:no-repeat css property for those divs containing huge background images.
You can also check if you have a background image for body or html that is repeated, for me the big problem was a repeated pattern image that interfered considerably with google chrome's scrolling performance.
Also if you're using CSS transitions on those "slides" you should check that those are not assigned to "all". If you're having a transition only for the "left" property there is no point assigning it for "all".
I'm not sure if this alone will help you but it is always a good practice to compress your images and your scripts.
This stuff did the trick for me. Hope it helps.
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.