I am trying to make a background image of a div cover the screen on both desktop and mobile devices. It is working perfectly on desktop, but no matter what I try, the image appears zoomed in on mobile.
This is the page: https://www.smithbars.com/tappd/
This is the CSS for < div class="section1" >
/*desktop*/
#media only screen and (min-width: 800px) {
.section1 {
width: 100%;
margin: 0 auto;
text-align: center;
background-image: url(TAPPD1_.jpg);
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #000;
padding-bottom: 2em;
}
}
/*mobile*/
#media only screen and (max-width: 800px) {
.section1 {
width: 100%;
margin: 0 auto;
text-align: center;
background: url(TAPPD1_.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom: 2em;
}
}
Thanks so much for any help!
This is happening because you are trying to use background-size: cover which maintains the aspect ratio of the image.
cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
Change:
background-size: cover;
to:
background-size:100% 100%;
The image loses its aspect ratio but you get your wish.
Related
I am a beginner trying to display a different header on a mobile screen. The header has a background image portrait of 4 people, which will be too narrow so people will be left out when viewing on mobile.
What I tried is setting the background size to 100%, but this means there is a gray space below the picture (which is now fully visible) on mobile.
smallheader {
background: url(../image.jpg);
background-repeat: no-repeat;
background-position: center 70px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
height: 500px;
z-index: 0;
border-bottom: 15px solid #139cb0;
Decreasing the height to 300px on a mobile screen would work. How can I edit the code, or add a new class so that I can edit this height for mobile screens?
#media only screen and (max-width: 430px){
smallheader {
background: url(../image.jpg);
background-repeat: no-repeat;
background-position: center 70px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
height: 500px;
z-index: 0;
border-bottom: 15px solid #139cb0;
}
}
use media query like this
I have a banner div:
<div class="background" style="background: url(<%= #banner.image.url(:big) %>) no-repeat"></div>
and corresponding css:
#banner {
width: 100%;
height: 275px;
}
#banner .background {
width: 100%;
height: 275px;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
uploader.rb:
version :big do
process resize_to_fill: [1920, 280]
end
On smaller devices, the background-image is cropped, here are the screenshots. Full width:
And a resized window:
Is there any way to make the image be resizable when the screen width becomes narrow? Thanks.
Just use background-size: contain for this
#banner .background {
background-size: contain;
}
try background-size: 100% auto;
My background image is cutting off my text when the screen size is adjusted smaller. The background image is also not 100% of the screen height when viewed in large screens. What am I doing wrong?
.slider {
background: url("../images/bg2.jpg") no-repeat center center fixed;
background-size: cover;
max-height: 1200px;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Add min-height:100% for .slider class and add height: 100% for their parent body tag.
Remove width, overflow, height in .slider class.
Should be -
body {
height: 100%;
}
.slider {
background: url("../images/bg2.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
I have a cover photo on the front page of my website and it looks fine on desktop and scales with the browser size being changed, but looks absolutely horribly when opened on a mobile device.
Here's what I am using:
.first {
width: 100%;
height: 100%;
background-attachment: fixed;
position:relative;
background: url(../photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I also tried doing this:
#media only screen and (max-width: 320px) {
/* Small screen, non-retina */
.first {
background: url(../photo.jpg);
width: 50%;
height: 50%; }
}
#media only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Small screen, retina */
.first {
background: url(../photo.jpg);
width: 50%;
height: 50%; }
}
But that didn't work.
Any help will be appreciated!
We have a unique class on the image, so set the image absolutely positioned, and set the width using a percentage directly in the CSS.
You are using same classes more than once.
.first {
background: url("../lyuba_final.jpg") no-repeat fixed center center / cover rgba(0, 0, 0, 0);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
See your reptition below
Define horrible? What happens?
What mobile devices?
if you target the html element it should scale well.
html {
background: url(../photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
On mobile devices the image will be most likely cropped.
<html>
<head>
<style type="text/css">
.first {
width: 100%;
height: 100%;
background: url(9.jpg) no-repeat;
background-size: 100%;
/*if you don't want to maintain aspect ratio of image and make it cover entire screen
use: background-size: 100% 100%;
*/
}
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>
Hope this helps..
I'm trying to have a large background image stretch to the size of the browser window when a user first goes on the site. From this they navigate down through the rest of the site but you don't see it regardless of the size of the browser window without scrolling ( http://whiteboard.is is a good example of this ).
I'm using the code below and while it stretches horizontally it won't stretch vertically past the min-height. Any ideas?
HTML
<body>
<section id="first-section">
</section>
</body>
CSS
body, html {
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
#first-section {
background: url(1.jpg) no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 1024px;
min-height: 768px;
}
May be you can write height:100% also.
#first-section {
background: url(1.jpg) no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 1024px;
min-height: 768px;
height:100%;
}