so I'm trying to make my background image change when using a phone instead of a browser. The background is written in the style.CSS file, but apparently I'm doing something wrong because it won't change the picture no matter what.
Here is my CSS code.
body {
font-family: "Open Sans", sans-serif;
background-color: #040404;
color: #fff;
position: relative;
background: transparent;
}
body::before {
content: "";
position: fixed;
background:#040404 url("../img/Backgroundv.1.png") top right no-repeat;
background-size: cover;
left: 0;
right: 0;
top: 0;
height: 100vh;
z-index: -1;
}
#media screen and (max-width: 480px)
{
body {
content: "";
position: fixed;
background:#040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
background-size: cover;
left: 0;
right: 0;
top: 0;
height: 100vh;
z-index: -1;
}
}
Any tips or responses are much appreciated.
A small mistake. Change
body {
content: "";
position: fixed;
background: #040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
background-size: cover;
left: 0;
right: 0;
top: 0;
height: 100vh;
z-index: -1;
}
To:
body::before {
content: "";
position: fixed;
background: #040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
background-size: cover;
left: 0;
right: 0;
top: 0;
height: 100vh;
z-index: -1;
}
You were applying the CSS to the body tag instead of pseudo element
You use image in selectorbody::before
Change body in media query to body::before
Related
I've got a background which needs to have a dark background like it's got a low brightness.
When I add my brightness to 80% it's perfect but then I also lose the brightness of my text which is overlayed and that decreases in brightness as well. Is there a way I can increase the brightness on the text?
background-image: url("https...);
background-position: 50% 50%;
background-size: cover;
padding: 100px;
filter: brightness(80%);
in this case ::before or ::after is solution
div {
width: 100%;
height: 200px;
font-size: 40px;
font-weight: bold;
color: #fff;
position: relative;
}
span {
position: relative;
z-index: 1;
}
div::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: brightness(80%);
background-image: url("https://images-na.ssl-images-amazon.com/images/I/41-SYJSrDgL.jpg");
background-position: 50% 50%;
background-size: cover;
z-index: 0;
}
<div><span>test<span></div>
I have a background image set on the .section class in CSS. On that, I have an opacity as well. My child img is a transparent png however it's showing behind the background image on the div and it's also inheriting the opacity i have on the background image. How can I bring this to the top? I tried using z-indexes but it was not solving it.
.section {
background-size: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-image: url(/image/bg.png);
background-repeat: no-repeat;
position: relative;
}
.section:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #000000, #000000);
opacity: 0.6;
}
.logo {
width: 100%;
}
<div class="section">
<img class="logo" src={ "imgafi2x.png"}/>
</div>
Just using the below code:
Note: I didn't add snippet because it was React & SCSS. Stack Snippets don't support both React & SCSS. That's the reason I have linked to JSBin.
.section {
background-size: 100%;
background-color: rgba(0,0,0,0.5);
background-image: url(//placehold.it/500?text=BG);
background-repeat: no-repeat;
position:relative;
&:before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#000000,#000000);
opacity: .6;
z-index: 1;
}
.logo {
width: 100%;
position: relative; /* Change Here */
z-index: 2; /* Change Here */
}
}
Preview
Fiddle: http://output.jsbin.com/lepahirifa
I have a background which fills the screen, when I get to 1234px I want to position the background image a little more to the left and a little bit further down, but when I use background-position to offset like this :-
background-position: right 20px bottom 40px;
I get whitespace where it is pushing the background away. Is there a way to resolve this? Here is my css class:-
.full-background{
height:100vh;
width:100%;
background: no-repeat;
background-position: bottom center;
background-origin: content-box;
background-size: cover;
background-image: url('assets/img/background.png');
min-width:100%;
position:relative;
}
You could use a pseudo element, like this
.bkg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.bkg::after {
content: '';
position: absolute;
left: -10%;
top: -10%;
width: 120%;
height: 120%;
background-image: url(http://lorempixel.com/500/400/nature/1);
background-size: cover;
background-position: center;
}
#media screen and (min-width: 900px) { /* add your min-width here */
.bkg::after {
left: calc(-10% + 20px);
top: calc(-10% + 40px);
}
}
<div class="bkg"></div>
i'm trying to have ornamented border all along the right and left side of the document, but for some reason I have not managed to get the elements with those border ornaments reach 100% height.
What i have right now is:
html {
height: 100%;
}
body {
min-height: 100%;
background-image: url("../img/bgtile.png");
background-repeat: repeat;
background-color: transparent;
font-size: 18px;
}
body:before {
content: "";
background: transparent url("../img/frame-ornament-left.png") repeat-y 11px 0px;
height: 100%;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
z-index: 0;
}
body:after {
content: "";
background: transparent url("../img/frame-ornament-right.png") repeat-y;
height: 100%;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
z-index: 0;
}
And no matther what i try, those before and after elements always stay as high as viewport is. I've tried setting min-height to 100% on HTML element too, that indeed made html element as long as body, but those elements with ornaments in them still remain as high as viewport...
Set the body to position: relative, so it will be the context for the pseudo elements, instead of the html, and set bottom: 0 to both pseudo elements:
body {
position: relative;
background-image: url('../img/bgtile.png');
background-repeat: repeat;
background-color: transparent;
}
.content-demo {
height: 800px;
}
body:before {
content: "";
background: red;
width: 30px;
display: block;
left: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
body:after {
content: "";
background: blue;
width: 30px;
display: block;
right: 0;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
<div class="content-demo"></div>
I've been using that code on my body, to get a full background with some mi-transparent white background on it :
body {
background: url('../images/bg.jpg') no-repeat center center fixed;
padding-top: 50px;
}
body::after {
content: "";
background: white;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
The problem is that the white background doesn't go lower than the screen size as you can see here. Any idea how to fix that ?
It's because body::after isn't fixed, change the css like this :
body::after {
content: "";
background: white;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
Here is an example with a black background
Instead of using a ::before or ::after pseudo element, you can use css multple backgrounds.
Generate the base64 from this site: http://px64.net/
Apply the background to the body element.
#foo {
width: 400px;
height: 150px;
visibility: visible;
}
#foo {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYPhfDwACggF/yWU3jgAAAABJRU5ErkJggg==) repeat, url(http://www.openkorat.com/wp-content/uploads/2015/08/extra-bg-green.jpg) no-repeat;
background-size: auto, cover;
}
<div id="foo"></div>
Make the ::after element position: fixed.
Fiddle
body {
background: url('../images/bg.jpg') no-repeat center center fixed;
padding-top: 50px;
}
body::after {
content: "";
background: red;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
}
div {
height: 800px;
}
<div>div</div>