In order to show a parallax effect on Safari on iPad, I have adopted the following CSS rule:
body:after {
content: "";
position: fixed;
top: 0;
height: 100vh;
left: 0;
right: 0;
z-index: -1;
background: url(https://www.batteryminerals.com/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can see this effect on this site (behind the "current projects" section).
The corresponding staging site has the CSS rule:
body.home:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url('http://batmin.insightcomdes.com.au/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg') center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
in this file.
It also has the inline <style>:
<style>
body:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url('http://batmin.insightcomdes.com.au/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg') center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
on line 531.
However, the background image does not display at the staging site.
If I look in Chrome code inspector, on the production site, I see:
::after
</body>
</html>
but on the staging site, I don't see that ::after in code inspector.
Can you see why please?
Finally I got your solution:
Just Add display:block in css and it's work:
body.home:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url('http://batmin.insightcomdes.com.au/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg') center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display:block;
}
To be clear about the issue, display:block isn't mandatory to make the :after element showing:
body:after {
content: "";
position: fixed;
top: 0;
height: 100vh;
left: 0;
right: 0;
z-index: -1;
background: url(https://www.batteryminerals.com/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But the real issue is that you have some other CSS applied to your pseudo element that set display to none, so you are obliged to override this style by setting display:block
Related
I'm trying to get a background image to work in all browsers. The following code works perfectly for every browser but Firefox:
<style>
body {
background: url('src/images/SpeqS.jpg') no-repeat center;
background-size: 50%;
height: 100%;
}
</style>
Does anyone have any idea?
Updated code try this
body {
background: url('src/images/SpeqS.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
body {
background: url('http://s32.postimg.org/pqht43fkl/Speq_S.jpg') no-repeat top center;
background-size: 50%;
height: 100%;
}
This is working fine in the jsfiddle. Hope it's the result you are looking for.
I have the following CSS script that I would like help with. When its on a PC it looks fine, but when its on a mobile device its stretched. Is there anything I can add to it to keep the aspect ratio please?
body {
font-family: 'Open Sans', sans-serif;
background:url(../images/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
Thanks all
Rob
If you remove background-size: 100% 100% it should work for you.
Fiddle: http://codepen.io/anon/pen/wGVJRg
Its because of background-size: 100% 100%; in your code. change it to background-size: 100%. this may work.
If you are concerned about aspect ratio, it's always preferable to use img tag,
and the css for image tag would be
img.background-image-holder{
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-height: 100%;
max-width: 100%;
margin: auto;
}
here is an working link https://jsfiddle.net/t236ngep/
I want my background image like a Wallpaper. But I need some help to do it with css.
Here is my css:
#wallpaper{
position: absolute;
background-size: cover;
background-image: url(C:\Users\Pedro\Desktop\ASK2DOC landing_page\wallpaper.jpg);
background-repeat: no-repeat;
top: auto;
left: auto;
right: auto;
height: auto;
}
Try the following :
#wallpaper {
background: url(/*image_path*/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If it's doesn't work, click here.
If you want to cover the entire screen, you can simply do:
body {
background-size: cover;
background-image: url(/wallpaper.jpg);
background-repeat: no-repeat;
}
The image should be in a default directory for this website.
How would I go about ignoring to resize image when zooming in on the website just like on this website: http://antares.pcadviser.ro/
My website: http://vizz.tv/
I am using this right now but the image resizes when scrolling in:
#headerImage {
height: 750px;
width: 100%;
background: url(2.jpg) no-repeat;
background-repeat: no-repeat;
background-size: auto auto;
margin-top: -50px;
}
I would really appreciate if someone could help me solve this.
Try
#headerImage {
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;
}
From css tricks. There's a demo too
Alright, I managed to fix my issue by adding "background-size: cover;" which apparently auto fills the entire div with my image.
Here is the final code:
#headerImage {
height: 750px;
width: 100%;
background: url(2.jpg) no-repeat;
background-repeat: no-repeat;
background-size: cover;
margin-top: -50px;
}
I have a very large image to use as a background image. Because the image is so large, I have divided it into three images that can be stacked one on top of the other.
I'm putting the images in as background images with the property "cover":
<div class="screen" id="header1"></div>
<div class="screen" id="header2"></div>
<div class="screen" id="header3"></div>
css:
#header1
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
max-height: 949px;
background: url('images/bg1_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
#header2
{
background-color: #000;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 947px;
background: url('images/bg2_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;padding: 0;
margin: 0;
}
#header3
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
background: url('images/bg3_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
The problem is that the pattern in the background image doesn't line up.
How do I make multiple background images line up no matter how wide the screen is?
So... there's a few things going on here with this:
1st question : You haven't done anything to make the div's overlap in your CSS, so they are going to appear just one after the other in the document flow of the browser. For example, view this fiddle here:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
}
div:last-child {
background: blue;
}
If you want them to all overlap perfectly, aka to be superimposed, then they need to be positioned absolutely on top of each other, like this:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:last-child {
background: blue;
}
The other question is why you would break a large background image into 3 smaller images. We refer to that as image slicing, which is really not optimal. It takes 3 http requests instead of one to retrieve that image, which is more overhead than just getting the smaller one quite often. Also, it's a background image, so it won't prevent the document from fully loading until the image has loaded, as an inline image would.
Hope this helps.