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
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 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;
}
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?
This div with a fixed background shows fine in both Safari and Chrome, but not in Firefox. I try to find why but without luck.
Thank you in advice!
HTML
<div class="fixed-section fixed-bg-1">
<div class="overlay"></div>
</div>
CSS
.fixed-section {
min-height: 50%;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.fixed-section.fixed-bg-1 {
background-image: url("../images/slider-00.png");
}
.overlay {
background: transparent url("../images/overlays/overlay-01.png");
opacity: 0.5;
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
top: 0;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Add a height:50%; to your fixed-section class along with your min-height like this:
.fixed-section {
height: 50%;
min-height: 50%;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
You have 2 z-index properties in your overlay. More than likely one Safari/Chrome/Firefox read them in different orders.
Eg :
Safari/Chrome - z-index:0 then z-index:3
Firefox- z-index:3 then z-index: 0
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.