How can I add a linear radiant to a background image with a specified height?
Codepen
<div class="bg-img"></div>
<h1>This should not be covered</h1>
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
add position:relative to .bg-img so absolute pseudo refers to it for coordonates and positioning.
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
position:relative;
https://codepen.io/gc-nomade/pen/ZXKdbv
html,
body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background: url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
position: relative;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
opacity: .6;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
Other option is to use rgba() colors and set both gradient and image as background images
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background:linear-gradient(to bottom right, rgba(0,47,75,0.6), rgba(220,66,37,0.6)), url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
Related
I have a container like so: enter image description here
I have an image that is 100% width and height of the container, but I want the contents to only be visible in the blue boxes and not visible in the red boxes. How do I do so?
One way of doing this with a fixed image is to have each of the boxes have a pseudo before element that is the full size of the container and with that image as background.
In this snippet the box is clipped to its own size so that background gets clipped too and you see just the part that is 'below' the box.
* {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
position: relative;
background-color: red;
}
.container>div::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://picsum.photos/id/1015/1024/768);
background-size: cover;
z-index: -1;
}
.container>div {
position: absolute;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.box1 {
top: 10%;
height: 70%;
width: 20%;
left: 10%;
}
.box2 {
top: 20%;
height: 50%;
width: 20%;
left: 70%;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Map Page
Hi I'm making a map on my website and it needs to have icons on it that can be hovered which means they can't be apart of the actual map image itself.
I'm wondering how I would place the icons on the map and keep them in the same position on the map at different view widths/heights.
This is the CSS for my map background:
.background {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100vw;
height: 100vh;
background: url("../assets/map.png") no-repeat center center fixed;
-webkit-background-size: 100vw 100vh;
-moz-background-size: 100vw 100vh;
-o-background-size: 100vw 100vh;
background-size: 100vw 100vh;
}
The map will change size based on the resolution of the screen which makes it tricky for me to keep the icons in the same place through screen changes. Currently I tried using position absolute and putting it in the right place but as you change the screen so does the placement of the icon.
Am I doing it wrong or is there another solution to this? Thanks.
if you wanna position icons on a background then you have to give that background container a position relative and then give the elements inside background container a position absolute
body,
html {
margin: 0;
padding: 0;
}
.background {
position: relative;
width: 100%;
min-height: 100vh;
background-image: url('https://i.stack.imgur.com/KQxKh.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.icon1 {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon2 {
position: absolute;
top: 50px;
right: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon3 {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
width: 50px;
height: 50px;
background-color: #4AC144;
}
.icon4 {
position: absolute;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
.icon5 {
position: absolute;
bottom: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: #45619D;
}
<div class="background">
<span class="icon1"></span>
<span class="icon2"></span>
<span class="icon3"></span>
<span class="icon4"></span>
<span class="icon5"></span>
</div>
My linear-gradient only goes to the bottom of the div.
Question How to make sure the body linear-gradient goes to full height of the page?
CODEPEN DEMO
CSS
body {
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom right, #0087e0 50%, #004165 50%, #004165);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
.header {
background: #FFFFFF;
width: 100%;
height: 50px;
}
.wrapper {
background: #F0F0F0;
min-height: 600px;
}
#media (max-width: 968px) {
.text-mobile {
text-align: center !important;
}
}
HTML
<div class="container">
<div class="wrapper"></div>
</div>
You need to set your html and body height to 100%;
html, body {
height: 100%;
}
When I apply the blur filter to my markup the edges are not being blurred. I would like the entire region to be blurred.
HTML
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
CSS
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: 0;
right: 0;
bottom: 0px;
content: "text";
position: absolute;
height: 20%;
width: 100%;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(12px);
filter: blur(12px);
}
Codepen:
http://codepen.io/aaronbalthaser/pen/qNOYdE
The Codepen shows the blurred region. It is kind of like a footer but as you can see the edges are not blurred. Any ideas?
Thanks
You can set overflow: hidden and stretch a little bit the blurred image. I have set width to 110%, height to 35%, left, right and bottom to -5% (the added percentage to width and height). Hope this is what you want.
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: -5%;
right: -5%;
bottom: -5%;
content: "";
position: absolute;
height: 35%;
width: 110%;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(8px);
filter: blur(8px);
overflow: hidden;
}
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
my problem is:
I got this HTML:
<div id="UNDER">
</div>
<div id="OVER">
</div>
and this CSS:
#UNDER
{
width: 100%;
height: 10vh;
background-color: #004;
position: fixed;
z-index: 50;
}
#OVER
{
width: 100%;
height: 100vh;
background: url("images/bg.jpg") center center no-repeat fixed;
background-size: cover;
position: relative;
z-index: 9000;
}
But the background-image is behind UNDER and not over.
I try with the same code, just with background-color instead of background and it's working !
#UNDER
{
width: 100%;
height: 10vh;
background-color: #004;
position: fixed;
z-index: 50;
}
#OVER
{
width: 100%;
height: 100vh;
background-color: #009;
position: relative;
z-index: 9000;
}
Any clue about to make it works with an image in background ?
Thanks for the help.
I think you meant to have background instead of background-image.
http://jsfiddle.net/e56Sp/
background: url("images/bg.jpg") center center no-repeat fixed;