background image is not responsive on safari and chrome - css

my background on my div is not loading properly on iphone when using safari or chrome.it is completely responsive in Mozilla however in safari and chrome it still loads as a 100%width and 100%height.
it is the background image of the "sect" div.
this is my html
<div class="sect">
<H1>ALESH</h1>
<h2>This is me</h2>
<FORM METHOD="LINK" ACTION="Artbook.html">
<INPUT TYPE="submit" VALUE="explore my work" class="button1">
</FORM>
</div>
this is my css for pc
html, body {
height: 100%;
background-color: white;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.sect {
height: 100%;
width: 100%;
background-position: absolute;
background: url("homepage/photos/b1.jpg") no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding: 0;
left: 0;
Right: 0;
margin: auto;
top: -2px;
overflow: hidden;
}
I do have a separe css file for "max device width: 480px".
however nothing works do you please know where could be a mistake ?

add this tag in the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">

I had something similar:
the background image was not beeing displayed correctly on Safari & Safari mobile.
The problem is about
background-attachment: fixed
This is a bit tricky for mobile browsers.
For me I just had to leave that out.
Sometimes event the positioning is not available. So try without.
Maybe helpful for you:
Fixed background on iOS
Hope that helps.
Additional:
Also found this on Stack about that issue.

Related

background-attachment: fixed does not work in Safari

I have a div with a background-attachment: fixed CSS style to achieve a parallax effect which works perfectly in chrome but does not work in Safari. It causes extreme jittering when scrolling past in Safari, so much so that it is not possible to leave as is. When I comment out this CSS property the jittering is stopped (which highlights the problem is this specific styling property). I have looked at other posts on this but have yet to find something that fixes this behaviour or provides a workaround.
CSS:
#gallery {
background: url("../images/parallax-image.jpg");
background-size: cover;
background-position: top right;
background-attachment: fixed;
height: 45vh;
position: relative;
}
iOS has an issue preventing background-attachment: fixed from being used with background-size: cover. from "Can I Use".
could check on Can I Use tab "Known issues".
https://caniuse.com/#search=background-attachment
and fine details link
Background size on iOS
maybe "background-size: 100% 100%;" could help.
or use other div background like below.
sorry i don't has ios could check it work.
body{
height: 200vh;
}
.container{
position: relative;
height: 1920px;
}
.bgc{
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
background-image: url('https://picsum.photos/1920/1080/?random=1');
background-attachment: fixed;
}
<div class="container">
<div class="bgc">
</div>
</div>

Prevent background image from zooming in

I have a div with a background image. When the user zooms-in the page from the browser (using Ctrl & + or Ctrl + scroll), I don't want to zoom in the image. The image should remain unchanged by the zoom. Is there any way to do this?
This is the styles of the div containing the background image:
.owl-slide{
background-image: url('...');
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I know that the normal behaviour would be to zoom-in everything inside the page, even the image. But this is a client's request which needs to be solved, even if I don't agree with it.
set top and left value for the element and add a position:absolute. also set the width and height.
.owl-slide {
background-image: url('http://www.freepngimg.com/download/nature/1-2-nature-png-picture.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
}
<div class="owl-slide">Sample div</div>
maybe you can disable the viewport zoom
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
Cheers.

Background image does repeats on righthandside with bootstrap on Chrome

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/

HTML/CSS Div and Background Image

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)

CSS Stretched Background Image

I have a large image to be use as a background-image of a page. What I want is that the height of the image will be stretched to fill the height of the page. It should be centered also.
background: black url("/image/background.jpg") no-repeat fixed center;
background-size: cover will do the trick in modern browsers - see mozilla's documentation for more details.
For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this one to emulate the behaviour.
here is a good writeup
http://css-tricks.com/perfect-full-page-background-image/
the gist of it being
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
add this to the css
{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}
I think using a div would be the easiest way to get the effect you are looking for.
<div id="background">
<img src="/image/background.jpg" class="stretch" alt="" />
</div>
<style>
#background {
background-color:#000000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:100%;
}
</style>

Resources