I'm using Bootstrap 3 for my interface page on a site i manage. I set my full page background image using this CSS:
background-image:url('/path/to/image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
It works great... On desktop. On mobile, the image gets resized to to a very small resolution and it gets pushed up, above a bootstrap 3 panel.
Here is a picture. On desktop, the picture covers the full page.
And here is a jsfiddle.
The thing is that it works great if i remove the bootstrap code; for example on another page not using bootstrap, the same CSS is used. The image scales nicely on desktop and on mobile.
What could be the problem?
Thanks
I am not sure, but maybe depending on the browser you are using on the mobile phone?
Try adding:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I might be wrong, but worth a shot.
Hope it helps.
Finally i used; <img src="/resources/ui_bg.jpg" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;" alt="">
Thanks guys!
Related
I'm hoping someone might be able to help me with an issue that is beginning to drive me a little bit insane ...
I am working on a new webpage - www.romaheritage.co.uk/beta - and I'm having an issue with a background image near the bottom of the page in the "contact" section. Testing the page with two different browsers, the road image appears in Firefox, but does not appear in Google Chrome and I have no idea why!
What's more frustrating is I have a background image set at the top of the page and this works in both browsers without an issue!
the CSS I'm using is this (although feel free to inspect the website itself);
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Any help anyone can give me would be gratefully received, because a bit like Neo in the Matrix, I'm now just seeing lines of code but getting lost in it ...
The issue is with background-attachment: fixed; remove that to make just make the image appear. Or add backface-visibility: hidden;, to .contact-parallax-bg restore the fixed effect.
.contact-us-section{
position: relative;
}
remove position relative and you will have "parallax" effect and image will be there
I am trying to use a free web template. But I cannot figure out how can I fix the background image. Does anyone give an idea to solve this problem. I wanted to show the code but don't know which part to give.. I can show this on desktop with no problem.
set the height & width = 100% also div's too
Try having a look at the css3 background property
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;
}
I am sure it solves your purpose.
Have a look this link for detailed info
http://css-tricks.com/perfect-full-page-background-image/
Also as Syed mentioned, study about responsive design or stick to some framework like Bootstrap.
My site's background image is resizing nicely in Chrome and Safari using background-size: cover, but when I go to test my website on an ipad or iphone, the CSS background image is really zoomed in and looks horrible. I've read lots of other questions on here relating to this and none have solved my problem.
HTML
<div class="background">
</div><!--background-->
.background has no container and is 100% width of the screen.
CSS
.background {
height:600px;
width:100%;
position:relative;
background: url(css/img/strand.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I had the same issue, I used SCROLL instead of FIXED.
background-attachment:scroll;
Apparently, the iPad's Safari is downsampling images above the 1024px threshold. I had tried using scroll instead of fixed but that wasn't successful. Other tricks didn't work for me either.
I solved this by splitting my originally-too-large 1600×1600 image into two images. Because of that, I was able to use two 1024px sized images and achieved an even better readability than before.
Maybe a workaround like that would work for you, too.
I created a background for my website using CSS code it successfully worked but the problem is once I run it on different screen whether it was big or small I don't get similar consequences. When I run it on 13 inch screen the browser zooms in and the form what I get is probably not the same as in 18 inch well it obviously wouldn't have the exactly form but more or less I need it to be shown look-like. any suggestions? thnx in advance
body {
background-image: url(../images/background.jpg);
background-repeat: no-repeat;
}
An addition problem I have now is that the background isn't full-screen. its resolution is 1920x1080, though I can see the picture on the whole web browser page but still I couldn't see other details of the photo.
I think you need
background-size: cover;
There are some browser inconsistencies, which might mean it is better to use a jquery plugin.
Have a look at http://srobbin.com/jquery-plugins/backstretch/ it allows you to use a background image which resizes depending on the size of the screen. It also deals with IE. Nuff said.
Also look at http://css-tricks.com/perfect-full-page-background-image/
I'm not 100% on what you are trying to achieve but the above links are worth a look.
This is the css3 way
html {
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm having a problem using responsive backgrounds. http://poppykeith.co.uk/index.html looks correct on computer browsers and in landscape on a mobile browser, however when viewed on a mobile (im using iOS) in portrait, the image is squished to fit the screen.
How would I go about making the image just zoom in in portrait mode and not stretch?
Thanks
The code you wrote almost works, but the min-width:1024px and the width:100% rules are conflicting with each other and causing the squishing effect you see. Basically, width trumps min-width.
The real technique you want to use is to set that image as a background on the body element, and then use background-size:cover to make the browser load it appropriately
body {
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;
}
Details: http://css-tricks.com/perfect-full-page-background-image/
Check out this article: http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk
It talks about how Mobile Safari likes to scale down large images.