This div with a fixed background shows fine in both Safari and Chrome, but not in Firefox. I try to find why but without luck.
Thank you in advice!
HTML
<div class="fixed-section fixed-bg-1">
<div class="overlay"></div>
</div>
CSS
.fixed-section {
min-height: 50%;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.fixed-section.fixed-bg-1 {
background-image: url("../images/slider-00.png");
}
.overlay {
background: transparent url("../images/overlays/overlay-01.png");
opacity: 0.5;
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
top: 0;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Add a height:50%; to your fixed-section class along with your min-height like this:
.fixed-section {
height: 50%;
min-height: 50%;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
You have 2 z-index properties in your overlay. More than likely one Safari/Chrome/Firefox read them in different orders.
Eg :
Safari/Chrome - z-index:0 then z-index:3
Firefox- z-index:3 then z-index: 0
Related
I tried several solutions but none worked, the image does not want to show in full screen with the same size that I specified would it be possible to have a solution in css?
Here is my code:
body {
margin: 0;
padding: 0;
background:url(cactus2.jpg) no-repeat black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#nocursor {
cursor: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
}
body {
margin: 0;
padding: 0;
background: url(http://via.placeholder.com/100x50.jpg) no-repeat black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#nocursor {
cursor: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
position: fixed;
object-fit: center;
}
I have set a background image. I need that to be responsive. I have used media queries for that, but the image is the same. Should I use background-size or width and height to view it?
As in it gets cropped off. I tried the background-size:100% 100%, but it looks stretched.
The code is given below:
.header-area {
position: fixed;
background: url(images/image.jpg) no-repeat;
background-size:100% 100%;
width: 100%;
height: 100%;
}
.overlay {
position: relative;
z-index: 1;
}
.overlay:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #000000;
opacity: 0.4;
}
make background-size: cover and background-position: center
.header-area {
background-image: url("image url");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
thank you.
I've found the answer.
just needed to modify the code a bit.
.header-area {
position: fixed;
background: url(images/image.jpg) no-repeat center center fixed;
background-size: 100% 100%;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
removed the media query and used this.
body.page-id-444 {
height: 100%;
margin:0px;
background: url(picture) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.page-id-444 div#page {
width: 500px;
height: 450px;
top: 0;
bottom: 0;
position: absolute;
left :0;
right: 0;}
}
On Fire HD 8 in Landscape mode , the background goes up(no in the center) , if I remove from div#page position: absolute; then the background goes in center.
Any suggestions?
I want to change header's background image opacity with css. Could you help me please.
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(http://lorempixel.com/1910/500/nature/) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<header class="intro">
...
</header>
An alternative would be that you convert this background image file to the .PNG format and make the original image 0.2 opacity using a photo editing program but if you insist on using CSS, you can use the method below:
Since CSS does not directly support background image opacity, you can try using a pseudo-class to overlay another on your header and set opacity on it. Something along the lines of this should help:
<header class="intro">
...
</header>
.intro {
position: relative;
background: #5C97FF;
overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.intro:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('../img/bg.jpg');
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
HTML code
<header class="intro">
<img class="IntroImg" src="../img/bg.jpg">
</header>
CSS code
.intro introIimg:hover {
opacity: 1.0;//Set your opacity
...
}
Hope it will help you.
You can change the opacity in programs like Photoshop or GIMP.
Or you can do that with opacity in css. But you probably don't want that since you will have some content in your .intro which will then also be affected by it.
So I suggest following solution
.intro {
position: relative;
z-index: 0;
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: black;
background-color: transparent;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg');
background-size: cover;
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
https://jsfiddle.net/q63nf0La/
Basically you add :after element that will be a background image , you position it absolute ( your .intro will need to be position:relative; ) and then you set the z-index and opacity.
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
.intro {
position: relative;
z-index: 0;
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background-color: #000;
}
.intro:after {
content : "";
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
opacity : 0.2;
z-index: -1;
background: url(https://t1.ftcdn.net/jpg/00/81/10/58/240_F_81105881_pmBwtzXqFmtFx6rfhujAqTnhpWZf8fXn.jpg) no-repeat bottom center scroll;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<header class="intro">
...
</header>
See the link here
so I have background, which width is 1920px, and I'm trying to center it when the resolution is smaller than 1920x1080(1200).
At the moment image shows up, but it isn't in the center of screen.
My code:
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
}
Link about background-position
header {
background-image: url("images/header.jpg") ;
background-color: #000;
height: 306px;
width: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position:center; //add
}
if you need to crop the background just use
background-position: top center
this will ensure a centered alignment of the background along the x-axis and and a top-alignment along the y-axis
Try this:
html {
background: url(images/#.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}