<div> internal padding will not zero out - html

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.

Related

Image not Showing in fullscreen, Css

I tried several solutions but none worked, the image does not want to show in full screen with the same size that I specified would it be possible to have a solution in css?
Here is my code:
body {
margin: 0;
padding: 0;
background:url(cactus2.jpg) no-repeat black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#nocursor {
cursor: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
}

body {
margin: 0;
padding: 0;
background: url(http://via.placeholder.com/100x50.jpg) no-repeat black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#nocursor {
cursor: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
position: fixed;
object-fit: center;
}

background image do not display on iphone 5

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%;
}

Cannot remove the white space on the bottom of the page (mobile)

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;
}

Silk browser background cover center doesn't work if there is a div absolute

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?

Centering background

so I have background, which width is 1920px, and I'm trying to center it when the resolution is smaller than 1920x1080(1200).
At the moment image shows up, but it isn't in the center of screen.
My code:
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
}

Link about background-position
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position:center; //add
}

if you need to crop the background just use
background-position: top center
this will ensure a centered alignment of the background along the x-axis and and a top-alignment along the y-axis

Try this:
html {
background: url(images/#.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}