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?
Related
I have a problem with the image on main page of my portfolio website. The image is expanded on mobile devices. Here I upload my CSS code.
height: 85vh;
min-height: 100%;
background-image: url('./ZdjeciaPortfolio/mainPhoto.jpg');
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
What can I do? I saw other answers on stack, but all doesn't work
Image
I've got a 8192x8192 image which should be used as a background image. It shows the image but only the half and I've got no clue how to scale the height correctly.
My CSS code:
body {
background: url('../img/atlas.png') no-repeat;
background-size: cover;
height: 100%;
width: 100%;}
Is it what you want?
body {
background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
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;
}
}
I've been searching and trying different things but I can't get anything to work. I have a background image at the top of this page with light yellow text on top.
I am using this code to make it responsive.
.homepage-intro{
background: url('http://inboundmarketing.digitalhive.buzz/hubfs/dec-2015-images/bee-flower-purple.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But on mobile the light yellow text is on top of the light yellow part of the flower, so I was thinking to swap the image out for color #634356 but nothing that I try by searching and using suggested code works.
Thank you.
Try this media queries in CSS along with your noraml CSS
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
.homepage-intro{
background: #yourColor;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
/*normal css*/
.homepage-intro{
background: url('http://inboundmarketing.digitalhive.buzz/hubfs/dec-2015-images/bee-flower-purple.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am using bootstrap and rails. I am trying to have a background image take up the entire background and stretch when the browser is larger. This is working for the most part, except when the browser is smaller the bottom of the image goes up and the bottom of the browser screen is blank. Here is the css I have now:
body {
background-image: url('bilde.jpg');
background-repeat: no-repeat;
background-position: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have tried this:
body {
background-image: url('bilde.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
but it does not work either. Does anyone have an answer for this problem? Thanks.
I figured it out. The difference was that I should have been using
background: url('bilde.jpg') no-repeat center center fixed;
instead of
background-image: url('bilde.jpg') no-repeat center center fixed;
Pretty subtle but the change did the trick.