I'm working on a hybrid app in Ionic. I set a background of div like this:
.loginForm {
background: url(../img/bg1-web.jpg);
background-size:cover;
}
If the keyboard appears in the form, the background image resizes because the height of device reduces.
This is the normal behaviour and this is right. But I would like that the background image not resizes and stay fixed. I tryed with background-attachment set to fixed but not work.
Is there a way?
Use
background-size: 100% 100%;
background-attachment: fixed;
instead.
Related
I have a background-image in a fixed navigation bar and the same background-image in the main body of our website. The goal is to create the effect of the contents going under the navigation when the user scrolls like on this website:
http://bonobomusic.com/news.php
Here is the site I'm building where the problem is:
http://rattletree.com/wordpress2/
When I have the page at full width for my screen everything looks good, but when I resize the window then the background-image in the header is resizing at a different rate than the one on the body. This is the css I'm using for the header:
#main-header{
position:fixed!important;
background-image:url("img");
background-position-y: -62px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm seeing that the image in the header is scaling smaller and smaller in both the x and y axis the whole time, and on the background image it scales for a while on both axis but then at a certain point, it is only scaling horizontally and not vertically. Any help would be appreciated!
Please note: the problem is most obvious when viewing the page at different screen sizes-like a mobile device vs a computer.
Sorry I can comment so I post an answer.
The problem is that your header has a position with 30px in Y. The easiest way is to set the value to 0px.
Else you'll have to use a second background img for header by removing 30px of the original.
Set your header to full width then give the body and the header the same background image and options. Also make sure the background is centered.
Now add something like this. You will most likely have to remove some of the !importants.
#media screen and (max-width: 999px) {
body {
background-size: contain;
}
#main-header {
background-position-y: -30px;
}
}
I used http://quirktools.com/screenfly/ to check upon different screen sizes
Have you tried positioning absolute both the header and body and make them 100% width and height of the window. Then put the background image on both as cover. Then you can make a div that is positioned however far from the top as your header should be and give it overflow hidden.
I'm trying to fix an issue. I have a background advertising (skin) and I must increase the size: the same adv is served for two website, but one of the website has a larger container.
I try with background-size property, but when I try to set "110%" the behavior of the background is related to the windows, so if I resize the browser the skin follow the browser.
Ho can I increase the size of the background keeping it centered on the container?
Using background-size:cover you can make a (centered) image stretch over the full size of a container element. For example:
.background {
background: url(image.jpg) 50% 50% no-repeat;
background-size: cover;
}
Try scaling the result field in this example fiddle. You'll see the image scaling to fill the div no matter what format. Read more about using background-size: cover it on CSS tricks.
I am using blogger and recently inserted this cc code in to the advanced section of the template designer to input a background image
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
}
.body-fauxcolumn-outer div {
background: none !important;
}
The problem is that when the browser window is resized the background stays the same but all the widgets/elements on the page resize along with the window.
See www.ashlylondon.blogspot.com
I need the background to resize along with the widgets so that they stay in the white area on the background image.
You are relying on background resizing so much that your layout won't work without it. That's not ideal. The typical approach to a situation like this would be:
Have a background image that covers the entire screen
Give the <div> element that contains the actual content a background-color: white property.
You can still use background-size to scale your background image to the screen size, but it no longer is necessary for the layout to work.
this woul make sure your content is always readable no matter what; it'll work where background-size won't, e.g. in older browsers and some mobile devices.
add this to your css
body{background-size:100%;}
try this
add in body class background-size:cover;
http://jsfiddle.net/pyFbF/3/
body {
background: url(http://img854.imageshack.us/img854/9854/ied6.jpg) no-repeat;
background-attachment:fixed;
background-color: none;
background-size:cover;
}
.body-fauxcolumn-outer div {
background: none !important;
}
I've searched for hours upon hours and now I figure it's time for me to ask the question. I can't get my background image that is placed in my header to fit to screen. It works for every kind of computer resolution fine, but where I run into trouble is when I am viewing on a phone, it doesn't want to shrink. I've done min-height, max-height, I've tried everything, the problem partly I think is that the header div itself is smaller than this image, but I also don't really know and need some guidance, i'm relatively new to the CSS scene.
Here is what I have:
#header {
background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 209px;
}
Website url is http://hamsoc.polymath.io
Thank you for your help in advance!
Duncan Beattie gave me the answer and it worked like a charm. Here is what he said:
"You have background-size: cover which is fitting the height of the
background image to the fixed height of your div, 209px. remove the
fixed height and replace with padding-bottom:15% this will kep the
aspect ratio of the div the same and scale the image as viewport gets
smaller."
You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px.
remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller.
I would suggest having the header image in your HTML rather than a background image and then setting a max-width like so:
#header img{
max-width: 100%;
height: auto;
}
This will also allow you to make the image "clickable" which is generally wanted in a header logo.
DEMO FIDDLE
FULLSCREEN
Have you used the a precentage to set the height of the image in the div?
So set the image height to be say 100% of the div?
If not then maybe you could use some javascript code to detect whether they are on a mobile device, and set the height of it accordingly?
The hard coded height value is messing you up. Try playing with the height: 290px value and watch the header fit properly on smaller screens.
Instead of a background image, you can try putting the image in the html and using a CSS property to help the content scale down on smaller screens.
img {
max-width: 100%;
}
I have a sidebar with 2 background images. This is my CSS:
background-color: #fff;
background-image: url('img/back-1.png'), url('img/back-2.png');
background-position: left top, left top;
background-repeat: no-repeat, repeat-y;
background-size: 100% auto, 100% auto;
when I change the width of the browser with the mouse (I use responsive design), the second image disappears in some position. But if I refresh the page or change the width, everything restores. Do you have any idea why does the image disappear?
I had a similar issue,
I made 2 classes of CSS,
Detected the browser width by JavaScript,
Attached the right one to the class by JavaScript;