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>
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>
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
How to create a partial width opacity ?
I have a div that has a background image with transparency, I used after to do get the effect like this
.indicators-menu {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
z-index: 1;
}
.indicators-menu::after {
background-image: url('bg_platform_repeat.jpg');
content: "";
opacity: 0.9;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
This works great, but what I need to do is to split the opacity by width
instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
I thought to use the CSS mask property but I see that its not well supported
what i need to do is to split the opacity by width instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
Use two pseudo-elements with the same background image but position them differently.
div {
width: 460px;
height: 300px;
margin: 1em auto;
border: 1px solid red;
position: relative;
}
div:before,
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-image: url(http://www.fillmurray.com/460/300);
background-repeat: no-repeat;
background-size: cover;
}
div:before {
width: 80%;
opacity: 0.5;
/* for example */
}
div:after {
width: 20%;
left: 80%;
background-position: 100% 0;
}
<div>
</div>
One idea is to use an overlay above the image to simulate this effect. The color used need to be the same as the below background:
.box {
background:
linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)) left/80% 100%,
url('https://picsum.photos/200/200?image=1069') center/cover;
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
<div class="box">
</div>
Use :before with background: white; and opacity:0.1(I set 0.4 only you to see the difference) and width:80%
.indicators-menu::after,.indicators-menu::before{
background-image: url('https://i.imgur.com/BK7wL0d.jpg');
content: "";
opacity:1;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
.indicators-menu::before{
background: white;
opacity: 0.4;
z-index: 2;
width: 80%;
}
<div class="indicators-menu">
</div>
My buttons and text should remain on background size and be responsive.
This happens when I zoom in.
CSS-
#bg {
height: 100vh;
background-image: url('../../assets/img/2.png'); /* Background Image Link */
background-size: 102%;
background-repeat: no-repeat;
position: relative;
}
.container1 {
display: table;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
What I`m doing wrong?
In your CSS it should be: background-size: cover;
#bg {
height: 100vh;
background-image: url('../../assets/img/2.png');
background-size: cover; /*Change Here*/
background-repeat: no-repeat;
position: relative;
}
So I have a block and it should keep it's place and proportions to fit background so when I resize the window, the block resizes aswell but background and block do resize in different ways.
html,body {
height:100%;
width:100%;
}
body {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background: url('../img/mainpage/555.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a#easttoplink {
position:relative;
display:block;
left:40%;
top:26.5%;
background-color: #00ff00;
opacity: 0.3;
width:21.5%;
height:4%;
}
a#easttoplink:hover {
opacity:0.7;
background-color: #ffff00;
}
Made it that way:
CSS
#wrapper {
position: absolute;
top: 50%;
margin-top: -25%;/* half of #content height*/
left: 0;
width: 100%;
}
#container {
position: relative;
width:100%;
display: inline-block;
margin: auto auto;
}
#container:after {
padding-top: 56.25%;
display: block;
content: '';
overflow:hidden;
}
Wrapper is a outside the #container