I encountered an issue on displaying a site when in mobile. The images background size that is set to cover works well on desktop but when in chrome android phone it won't get full screen. I know this was asked before and tried them but no luck for me.
What I tried is:
html, body {
height:100%;
min-height:100%;
margin: 0;
/* The image used */
background-image: url('../images/bg.png');
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
I also tried adding media query to display smaller background image to fit mobile screen but no luck.
Media Query:
#media only screen and (max-width : 500px) {
body, html {
background-image: url('../images/mobile-bg.png');
background-repeat:no-repeat;
background-position: center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}
}
Related
I have a 4496x3000 image I am using for a background image. It's responsive until it get down to about 1190px at which time it's not. I thought maybe creating a media query and using a smaller image would help but it did not. What is wrong with my code that makes it stop being responsive?
body, html {
margin: 0;
padding: 0;
width: 100%
}
.bgimg {
width: 100%;
background-image: url(../img/pexels-photo-Original-4496x3000.jpeg);
opacity: 0.65;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #464646;
}
#media only screen and (max-width : 1190px) {
.bgimg {
background-image:
url(../img/pexels-photo-medium-1280x854.jpeg);
}
}
<body class="bgimg">
I tried the code without media query and it worked well i.e. made my background image responsive. You should try using another (bigger) image and without using media query.
I use this code to show image full screen in my desktop
<style>
body{
background: url("under-constraction1.jpg")no-repeat fixed 0 0 / cover ;
}
</style>
but in mobile in Firefox browser a piece of my image is shown
how can I fix it?
Use this
body{
background: url("under-constraction1.jpg") no-repeat center center fixed
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
width:100%;
height: 100%;
background-image: url("./images/under-constraction1.jpg");
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
I’ve been able to get my images to be mobile responsive and to resize correctly except for iPhones. These are images that are loaded as background images through css. I am using media queries.
#wineClub{
background:black url('/Winery/img/winebottles3.jpg') center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
/*For devices 400px and larger: */
#media only screen and (min-device-width: 700px) {
#wineClub {
background-image: url('/Winery/img/winebottles2.jpg')center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
What gives?
I would like to have a full size background, for my hero unit. I used the following code:
HTML
<div class="hero">
<h1> hello world </h1>
</div>
CSS
.hero {
background:url(../images/header1.png) no-repeat center center;
background-size:cover;
min-height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
The problem with my solution: The background is only as high as my heading is. But the size should not depend on the content, it should depend on the viewers resolution.
Here is a perfect example: https://www.zirtual.com/ This hero-unit has also a fullscreen background-image. Thats the way, I would like to have it, too.
You have to set a 100% height for your body and html tag, and your .hero class.
Like this:
body, html {
height: 100%;
}
.hero {
height: 100%;
background: url("../images/header1.png") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
JSFiddle Demo
make sure your html,body height and width is 100% .
I have a div with background image and i set background-size:cover to make full width and height background image. but its not working in ios devices how can i set it for ios devices please help me
thanks
It should be background-size: cover; and not background-image. Also, you should be using browser prefixes as the property was released under CSS3 Specification1..
body {
background-image: url(#);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
1. Browser Support
edit - Updated Fiddle
I had a similar problem. I got my solution by setting a scroll attribute for background. Also be sure to set the parent container to 100% height and width. AdrianS has the right point for aiming at html to set 100% height and 100% width.
In the following code, I have a header class for the background image. Adapt it as you need.
Check out a fiddle at http://jsfiddle.net/Bavc_Am/7L3gD/5/
Upvote if helpful please, I'm new here.
html,
body {
height: 100%;
width: 100%;
}
/* Full Page Image Header Area */
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
background: url(http://placehold.it/800x800.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Responsive */
#media (max-width: 768px) {
.header {
background: url(http://placehold.it/800x800.png) no-repeat center center scroll;
}
}
User mkubilayk posted the solution the really worked for me here. The lifesaver whas the property below:
background-attachment: scroll;
Quoting:
I have had a similar issue recently and realised that it's not due to
background-size:cover but background-attachment:fixed.
I solved the issue by using a media query for iPhone and setting
background-attachment property to scroll.
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
} }
The solution I will provide can be seen here. But with a minor change. This method is tested many times and for IE it has IE8+ support. You can see the full browser support in the link that I provided.
html {
width: 100%;
height: 100%;
}
body {
background: #Fallback-color;
background: url(../images/image.jpg) center top no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg', sizingMethod='scale')";
height: 100%;
}