I can't adjust background img of a div so it is filled by the image, regardless of div's and img's size. If the image is smaller then it should be streched and vice versa. The whole image should be visible, regardless of deformation and loss of quality.
I tried all this combinations and permutations, and many more. Simply - doesn't work.
background-repeat: no-repeat;
background-position: top center;
background-size: auto;
background-size: cover;
background-size: contain;
background-size: 100% 100%;
I use Firefox 22, css is valid css3, according to W3C validator.
This is for CSS3 only
background-size: 100% 100%;
UPD: For old IE you can use filters:
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgpath', sizingMethod='scale')"; /* IE8 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgpath', sizingMethod='scale'); /* pre IE8 */
Try setting the same height and width for the image which you have given for the div.
var currentHeight = $('.element_class').height();
var currentWidth = $('.element_class').width();
$('.yourimage').height()=currentHeight;
$('.yourimage').height()=currentWidth;
Related
Apple have just released their new iOS7 operating system but it's causing issues with my retina icon media queries. It appears the background-size property is being ignored. An example image is here: http://imgur.com/R3OgFgN
The image replacement works perfectly on iPhones 4, 4s, 5 running iOS6 and below (any browser). iOS7 browsers appear to grab the high-res image but ignore the background-size property:
#media (-webkit-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
}
What it does do;
Replaces the original image with the #2x image
What it doesn't do;
Fit the background image to the div element size.
Tested on iOS7 Safari & Chrome.
Has anyone had this problem, and if so how did you manage to fix it?
I solved it! Turns out, iOS7 resets the background-size property when running a media query. The trick is to specify the background-size with the exact pixel dimensions, or with a 100% value like so;
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx){
.logo{
background: url(../img/2x/logo#2x.png) no-repeat 0 0 !important;
background-size: 100% !important;
width: 30px;
height: 40px;
}
N.b - I also found that including the !important tag ensured all retina devices read the query properly, including Samsung S3 & S4. Enjoy.
This is not buggy behaviour. This is your fault.
You set all background properties here:
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
so browser treats this as
background-image:url(../img/2x/m-yellloh-logo#2x.png) !important
background-position:0 0 !important
background-repeat:no-repeat !important
background-size:auto auto !important
and so on
thus your last line background-size: 100%; is overridden by background-size:auto auto !important;
Because the example is an image. I cannot inspect the code.
You might try the following option:
If the div's width and height is fixed. You can set a fixed width and height to the image. also normally the retina-display need the "min-device-pixel-ratio" for high resolution display.
e.g.
#media (-webkit-min-device-pixel-ratio: 2)
and (min-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
width: 200px;
height: 100px;
}
or if the div is not fixed.
#media (-webkit-min-device-pixel-ratio: 2)
and (min-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
background-size: contain;
}
Try if this can fix your issue.
Cheers!
On desktop Webkit, my image displays fine with no problems. When viewing it on mobile Webkit (iPad iOS 5 for example), a glaring white border appears. I am using background-image and background-size because my element has a fixed proportion, but the image source itself can be any random proportion.
JSFiddle:
http://jsfiddle.net/tokyotech/A2zAv/
HTML:
<img />
CSS:
body {
background: #666; }
img {
width: 8em;
height: 8em;
display: block;
background: rgba(0,0,0,0.5);
box-shadow: 0 1px 0 rgba(255,255,255,0.1),
0 1px 0 rgba(0,0,0,0.5) inset;
background-size: cover;
border-radius: 0.4em;
background-image: url(http://1.bp.blogspot.com/_yhfaur8OkQ0/SwQzJkzYt5I/AAAAAAAAAtU/5eIqHFmS63s/s400/ev.jpg);
}
This is a weird issue that happens when you don't specify an img src. The browser wants to show that the element exists but doesn't have any content so it wraps it with a border. You can fix this by declaring the img's source in the HTML.
Try this fiddle: http://jsfiddle.net/A2zAv/3/
If you don't want to declare an img src, don't use the img element for your image. You could use a div and get around this rendering issue instead. This will allow you to contain the image to the container as needed.
http://jsfiddle.net/A2zAv/4/
As a further alternate, you could insert a 1px by 1px transparent spacer gif in your image's src if you absolutely want to use an img tag.
See Strange border on IMG tag for more details.
I have a div named "page". I set its background-image with CSS, using the code below. I size the image to take 100% of the div's width, and it sets nicely its height to keep its scale. But when I set "background-attachment: fixed", it resizes the image. It increases the image size, and now it doesn't fit into my div, so most of it is cut.
I will highly appreciate any help.
The CSS code:
#page {
height: 100%;
width: 60%;
margin: 0 auto;
background-image: url('bg2.jpg');
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
background-repeat: no-repeat;
background-attachment: fixed;
}
I have just encountered the same issue with a background image sized using background-size: contain;.
When I set the background-attachment to fixed, the sizing no longer applies to the element carrying the background image, but instead it seems to apply to the viewport, so it's much larger and extends beyond the original element.
I'm using fancybox 2 and I can get rid of the padding around the outside of the frame, but then I lose the border-radius that it comes with.
What I want is a border-radius around the main content inside the frame. So I tried going into the css and adding a border-radius to the fancy-box inner selector and it won't work. How can I give the frame a rounded corner without a border?
If anyone can help me with this that would be great!
Try this code it worked for me
Add custom classes after fancy box on complete method.
Ex.
HTML
Login
JS
$(document).ready(function(e) {
$(".signin-ovr").fancybox({
afterLoad : function(){
$("#fancybox-content").addClass('fancybox-content-cust');
$(".fancybox-bg").addClass('fancybox-bg-cust');
$("#fancybox-outer").addClass('fancybox-outer-cust');
}
});
});
CSS
.fancybox-content-cust {
overflow: visible !important;
border: 10px solid #FFFFFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.fancybox-bg-cust{
display: none;
}
.fancybox-outer-cust {
background: transparent !important;
}
Then you will get border radius to the overlay box.
for fancybox v2 round borders
.fancybox-outer, .fancybox-inner, .fancybox-skin {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px!important;
}
CSS3 has a border radius property ironically enough entitled border-radius there are a few specific variations ie, Firefoxes moz-border-radius.
It is used like so:
#div-id .specific-class {
border-radius: 10px;
}
If you only want one rounded it has the ability to be modified like so
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
I hope this answers your question.
I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes.
My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image.
Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.
Can anyone please help? Thanks in advance.
Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like
<body>
<div id="background"></div>
...
</body>
And for the CSS I stated the following:
#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
background-size:contain;
}
And this did the trick for me. Hopefully it helps (someone out there :P)
You looking for css background-attachment property.
div[data-role="page"]{
background-attachment: fixed;
}
Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.
you can try this:
.ui-mobile
.ui-page-active{
display:block;
overflow:visible;
overflow-x:hidden;
}
works fine for me.
You can set your background image to the jQuery page:
.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
Try with this, this work for me.
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0 fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
<body>
<div id="background"></div>
...
</body>
css:
#background {
background-image: url("/images/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
position: fixed;
background-position: 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: 480px) {
#background {
background-attachment: initial !important;
}
}
The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by #media