So I have a full screen background set up like so:
#div {
background-image: url("images/slide1.jpg");
background-position: center 20%;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
The background image resizes according to all view ports sizes, but when I view the site from my mobile, it seems to be displaying a very small section of the whole image - basically the background-size: cover; rule doesn't seem to working. It should also be noted that if I make the window on my computer phone size, the background resizes properly. It also resizes properly when I view it using the responsive display tool 'responsivetest.net'. Just not when I actually open it on a phone.
Any suggestions are, as always, much appreciated.
I'm doing something similar for a portfolio site that's in development and it works fine on mobile. Here's my working code for CSS:
display: table;
width: 100%;
height: auto;
padding: 100px 0;
background: url(../img/bbg1.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
So you can see some things you can try changing, such as the display height.
Test this site on your mobile device
Related
I'm building a website using bootstrap and Django. While testing out the UI, the Position: fixed; is not working on an iPhone. I'm attempting to apply this functionality to a background image. I know that Apple doesn't support this, but has anyone found a workaround? Below is my CSS:
width: 100%;
height: calc(100vh - 40px);
background: url('../img/BTDARKBLUE1.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
position: relative;
margin-top: 40px;
background-position: cover; doesn't work on the mobile browser some time.
Remove this property and check it again.
Also here is the link with alot of solutions for the same problem
background: fixed no repeat not working on mobile
I've been struggling with this one for a while, so hoping someone might be able to help me out.
I'm using WP Bakery plugin, and the page background images I set are really blurry on smaller screens. All looks fine on the Wordpress/Chrome visual editors, but on an actual phone/tablet the photo doesn't resize, so it's just a blurry mess. The CSS is as follows:
body {
background-color: #00657f!important;
background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
website address is 414kiting.com
Any help hugely appreciated.
I found the solution- this will surely work :), Can you please try this with media query :
#media only screen and (max-width : 767px ) {
body {
background-attachment: initial;
}
body:before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(http://414kiting.com/wp-content/uploads/2018/07/player_hantu_light-50.jpeg) !important;
background-size: cover;
background-position: center center;
}
}
Lots of mobile browsers don't support
background-attachment: fixed;
Best way to solve this is to make a media query for tablet sizes and lower to make the background-attachment: scroll or initial and then try to simulate the effect or just discard it on mobile devices.
Edit: typo
I am having this problem, I have an image that I want to get full widht and height of a div showing always the center of the image, and it works perfectly on desktop browsers, even when I resize the window to a mobile size, but in Android browser it always shows the right side of the image and I cant achieve to make it work.
Here is the code:
<div class="main-content" style="background-image: url(<?php echo get_field('imagen_portada')?>)">
And the CSS:
.main-content {
width: 100%;
background-size: cover;
background-position: center;
min-height: 100vh;
}
To me it doen't make any sense that this is not working.
EDIT: BTW, if I use "background-position: left" the image get shrinked and if I use right the image just don't show at all, all of this in Chrome for Android, in desktop browser it all works just as it should.
background-size: cover used in combination with background-position: center to zoom/scale the background images. For full-width/fit-to-screen background image, you can use background-size: 100% 100% or background-size: 100vw 100vh. Look at this post to understand the difference between cover and 100%?
.main-content {
background: url("//via.placeholder.com/1000/4B89DA/4B89DA") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
width: 100vw;
min-height: 100vh;
}
<div class="main-content"></div>
I'm new to bootstrap and have tested my webpage on a few browsers.
When I make the width of the tab smaller on chrome, either from the left or right in chrome, part of the image is cropped and put on the other side of the image. The imgur picture shows the problem.
Any help or advice is appreciated!
This is the issue of bootstrap with chrome
My website page with a problem is here
I've put my css code below:
#header {
width: 100%;
min-height: 500px;
/*height: 50%;*/
background-image: url("/galleryPhotos/whiteVan2.jpeg");
margin-top: 0px;
background-size: cover;
background-position: 100%;
background-repeat: no-repeat;
top: 0px;
position: relative;
}
Try adding these to your css, it seems to work for me in your example.
-webkit-background-size: cover; //safari chrome
-moz-background-size: cover; // firefox
-o-background-size: cover; // opera
Here is a fiddle for it (different pic though): https://jsfiddle.net/46zcm0yL/
Ok so what I mean is, I want my background image to stay and the content in the div to scroll as more content inside is added.
see I don't want this to scroll
http://codepen.io/anon/pen/gLCns/
see kind of like the content on the codepen where you scroll in each window but it doesn't flow all over just in that window
you can use background-attachment: fixed; property to fix the background image.
html {
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.content{
position: absolute;
background-color: rgba(255,255,255,0.7);
width:50%;
height:1020px;
left:20px;
top:20px;
}
Here is a Demo.
The background-attachment property is what controls if the background image scrolls or stays.
http://www.w3schools.com/cssref/pr_background-attachment.asp
So in the CodePen it has background-attachment:fixed; and the image stays put while the content above it scrolls.
Then you simply center the content container on the page, leaving off overflows, and as the content grows the page will scroll but the background is fixed.
OK, first your code is a mess. I recommend running your code through the w3 validator first.
You have two options to do what you want, either using the background fixed & cover that you already have answers for:
html {
width: 100%;
height: 100%;
background: url(image_URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
or using overflow on the div with the content.
#content {
width: 600px;
height: 500px;
overflow-y: scroll;
}