I have a problem with my background on Phonegap
I'm also using JQuery mobile
this is my css code witch generate the background
html, body {
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.ui-page{
top: 0px;
left: 0px;
background: url('../img/bg.jpg') 0 0 no-repeat fixed !important;
background-size: auto 100%;
height: 100%;
width: 100%;
font-family: MankSans;
background-position:fixed;
background-color:#102a3e;
}
When I scroll in the page my background stay at the top and but the part where my background isn't fetch stay white and I can't understand why
Thanks for your help
Remove the !important from your style. This overrides your background-color. Just use
.ui-page {
background: #102a3e url('../img/bg.jpg') 0 0 no-repeat fixed;
}
Related
The header position of my website is always aligning to the left side in IE.
But it should be in the middle, in Chrome and Firefox its working without problems.
May i ask for your expertice for this?
Homepage:
CSS Code:
.header {
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
Please try this code for proper solution.
For header class you need to add below CSS
.header {
width: 100%;
}
and for navigation part, you need to update left side margin with below CSS.
.nav .ul .li {
margin-left: 32px;
}
By margin auto and max-width fixed no need to give left and right .It will automatically placed in the center of the page.
So just remove left and right
.header {
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
I currently have this code:
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
width: 100vw;
height: 100vh;
}
.bg {
margin: 0;
overflow: hidden;
position: fixed;
height: 100vh;
top: 0;
bottom: 0;
}
.bg figure {
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
width: 100vw;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
}
<div class="bg"><figure></figure></div>
The image is used as a sitewide background-image for a new platform and the reason for not just putting it into the body as a background-image is that I want to be able to use the CSS3 Filter (blur) on it + opacity, which for both I plan to animate in certain sections of the site.
However if I do this I have to use absolute positioning for all other content on the site which is kinda messy. Is there a better way to insert this image as a background without using absolute positioning?
I strongly prefer a CSS3-only solution.
Add the image using pseudo element, like this, and you can have other content floating on top.
If you get issues with the z-index: -1;, which keep the image to stay in the background, you can remove it and give immediate children of the body position: relative instead.
body {
margin: 0;
font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
background: #151626;
height: 100vh;
}
body::before {
content: '';
position: fixed;
height: 100%;
width: 100%;
background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
background-size: cover;
transform: scale(1.05);
filter: blur(10px);
opacity: 0.5;
z-index: -1;
}
div {
color: white;
font-size: 30px;
}
<div>Hey there....</div>
I have seen "Overriding HTML img with CSS" and "Resize image proportionally with CSS?", but neither of these helped me.
My large wallpaper image that is stuck beyond the size of my page and looks blurred.
I have tried using:
img.resize {
max-width:100%;
height: auto; }
On this type of code:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000 url('WALLPAPER IMAGE URL') no-repeat fixed center;
cursor: url('CURSOR IMAGE URL'), url('IDK WHY cute25.cur IS HERE EITHER'), help;
div#mask cursor: not-allowed; z-index: 999; height: 100%; width: 100%; }
But No matter where I put image.resize I haven't gotten it to work.
Please help.
Regards, ~Serliek
Add this to your css
background-size:contain;
This is what the code should look like for my image to be normal size and not blurred:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000 url('WALLPAPER IMAGE URL') no-repeat fixed center;
background-size:contain;
cursor: url('CURSOR IMAGE URL'), url('cute25.cur'), help;
div#mask cursor: not-allowed; z-index: 999; height: 100%; width: 100%; }
i have a left admin panel which is set in percentage width. the problem is that i have a repeating background in it and when i use background-size to tuck-in the background image to the size of percentage-based width, the image just disappears in chrome. in firefox it works fine. But when i use ctrl - to zoom-out the display, the image appears.
the css of the left panel is:
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top repeat-y;
background-size: 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
pls help.
You can use 100% 100% for background size.
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top;
background-size: 100% 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
http://jsfiddle.net/aEJRB/
try this
background-size:contain;
background-size: cover;
Try this.
I have a footer that is 1024px in width with a background image 1024px by 482px.
I want to put an x-repeating background to the left of it and an x-repeating background to the right of it. How do I do this?
This is what I have:
.footer {
background:
url("footerleft-bg.png") repeat-x,
url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}
But it makes the left background image completely cover the right one.
You could do it like this:
demo
footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 10em;
background: black;
}
footer:before, footer:after {
position: absolute;
top: 5%; bottom: 5%;
width: 40%;
background-repeat: repeat-x;
background-size: 1px 100%;
content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }
However, there is no way to do it without using nested elements or pseudo-elements. A background repeats itself or it doesn't. It doesn't repeat itself just on an interval from point A to point B (though I would sometimes find that useful as well).
CSS2 does not support multiple background images. You'll need to nest another HTML element to make this work.
See: http://www.quirksmode.org/css/multiple_backgrounds.html