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/
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
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
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%;
}
I have a very large image. I want to use this image as the background of my website. I would also like for this image to stretch and fit different browser window sizes.
This is the solution I have come up with. (I put it on jFiddle to make it easier for you guys to read).
http://jsfiddle.net/sGyax/
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;}
<body>
<div id="background">
<img src="background/001.JPG" class="bg"/>
</div>
</body>
Is there anyway for me to do this without using IMG tag in my HTML? It interferes with the rest of my layout.
This should work in IE9/10 and current Firefox, Opera and Chrome:
html{
background: url(background/001.JPG) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/001.JPG', sizingMethod='scale');
}
Make it a background image (see example below) instead of an image with a huge negative z-index, and consider using the CSS3 backgound-size property for covering the entire page.
background-image: url(background/001.JPG)