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;
}
Related
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
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
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;
}
I created a static bar with the code:
#header_bar {
background-image: url(../img/background_white.png);
height: 64px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
top: 0;
position: fixed;
}
And my code for my content:
#content {
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #D8F0DA;
width: 100%;
height: auto;
min-height: 100%;
position: relative;
background-image: url(../img/wallpaper.jpg);
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
It worked and my header bar became static but when I scroll down the header bar stays behind my contents. How can I fix this?
Try add a z-index to the header bar's CSS class:
position: fixed;
z-index: 100;
Should make it appear on top of content.