I am having a problem with the background image on my body tag. There is a white space on the bottom of the page when viewed on mobile.
Here is my css code:
body {
background: url("/images/laptop_bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Proxima Nova', Georgia, sans-serif;
}
html{
height: 100%;
}
The solutions I found on stack-overflow does not work. Any help would be appreciated. Thanks
Set height: 100vh; to html AND TRY background-size: 100% 100%;
body {
background: url("https://material.angular.io/assets/img/examples/shiba1.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
background-repeat: no-repeat;
}
html{
height: 100vh;
}
For your body tag, set the CSS as follows for a full display of the background-image.
body {
width: 100%;
background-image: url("/images/laptop_bg.jpg");
background-position: 0%, 0%, 50%, 50%;
background-size: auto, cover;
background-repeat: no-repeat;
font-family: 'Proxima Nova', Georgia, sans-serif;
}
Related
when i test website my chrome desktop and mobile emulatation, it still work
But when i check on iphone 5, banner background is not display
this my css
.banner .backImg {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
float: left;
margin: 0;
min-height: 772px;
padding: 0;
width: 100%;
}
I added a background image and it is not visible in the page.
This is what i tried:
Css:
div{
background: url(http://patentimages.storage.googleapis.com/CN103289961A/CN103289961AD00172.png) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
vertical-align: middle;
background-position: center;
}
Demo Link
It is because the div does not have measures width and height fixed or defined.
background: url(http://patentimages.storage.googleapis.com/CN103289961A/CN103289961AD00172.png) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
vertical-align: middle;
background-position: center;
width: 500px;
height: 500px;
}
Working link
body.page-id-444 {
height: 100%;
margin:0px;
background: url(picture) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.page-id-444 div#page {
width: 500px;
height: 450px;
top: 0;
bottom: 0;
position: absolute;
left :0;
right: 0;}
}
On Fire HD 8 in Landscape mode , the background goes up(no in the center) , if I remove from div#page position: absolute; then the background goes in center.
Any suggestions?
I have used this code but only the width is stretching. I want the whole image to stretch into the full screen.
jsFiddle
body
{
margin: 0px;
padding: 0px;
color: white;
font-family: Verdana;
background-size: 100% auto;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}
Here is a method I like to use:
JS Fiddle
body {
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
what about background-size: cover;?
body{
color: white;
font-family: Verdana;
background-size: cover;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
}
you could use html instead with height:100% and cover as value for background-size or only 100% if you do not mind to see image being streched :
jsfiddle
html
{
height : 100% ;
margin: 0px;
padding: 0px;
color: white;
font-family: Verdana;
background-size: cover;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}
jsfiddle
html
{
height : 100% ;
margin: 0px;
padding: 0px;
color: white;
font-family: Verdana;
background-size: 100% 100%;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}
you might want to use min-height on HTML : jsfiddle
html
{
min-height : 100% ;
margin: 0px;
padding: 0px;
color: white;
font-family: Verdana;
background-size: 100% 100%;
background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}
I cannot remove the padding for a that contains another . My site is www.housecallgeek.com/index.html. The div element has left and right margins that I cannot remove. source code is below
<style>
html{height:100%; background: url("http://www.housecallgeek.com/gdb.png") no-repeat center center fixed
;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
div.title{height:20%; width:100%; border-style:solid; border-width:0; margin:auto;
background: url("cropped merged finished smaller.png") no-repeat 49% 4% fixed;
-webkit-background-size: 63%;
-moz-background-size: 63%;
-o-background-size: 63%;
background-size: 63%;
}
body {margin: 0px; padding: 0px; border: 0px; height: 100%;}
div.main{border:0px; margin:0px; padding:0px; width:80%; min-height:76%; border-style:solid; border-width:1;margin:auto;
background: url("md.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
}
img.m{margin: 0px; padding: 0px; border: 0px; width: 100%; height:100%;}
div.menu{margin:0px; padding:0px; min-width:100%; height:50px; display:box ;}
</style>
your image m.png seems to have transparent sides. try a clean crop of the image.