I am trying to make a background header image to be responsive. I need it to be 100% of the viewport height or the image height, whichever is smaller.
An example would be the header banner similar to https://brittanychiang.com/v1/
The div size looks correct but the image don't seems to be showing up?
Created a jsfiddle here : https://jsfiddle.net/pnnxm1yf/2/
header {
height: 100vh;
max-height: 850px;
}
#header-banner {
color: #fff;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
background-size: cover;
position: relative;
}
<p>Why is my image not showing up?</p>
<header>
<section id="header-banner">
</section>
</header>
<p>content after image</p>
Add height: 100% to your #header-banner. Its height is 0 atm.
You need to add the height property onto the same element that has the background image.
#header-banner {
height: 100vh;
max-height: 850px;
color: #fff;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
background-size: cover;
position: relative;
}
Adding height to your header-banner will solve the issue.
Plus, please get your image url correct.
#header-banner {
color: #fff;
/* background: #ffffff url(img_tree.png) center center no-repeat; */
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url(https://unsplash.com/?photo=gzH1qxPLXtA) center center no-repeat;
background-size: cover;
/* background-color: red; */
position: relative;
height: 100%;
width: 100%;
}
you did not add the img url properly & if you solve it you will get your output
properly
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
</style>
<p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p>
</body>
</html>
frame
#header-banner {
height: 100%;
color: #fff;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1502582877126-512f3c5b0a64?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=') center center no-repeat;
background-size: cover;
position: relative;
}
Related
I was looking for how to generate the new glass morphism effect with CSS3. Afortunatelly I found This article that make it happens. In the first method the article makes something like this (I wrote this code with the same structure and properties):
body {
min-height: 100vh;
background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
background-attachment: fixed; /*<------ This is the most important part*/
}
.contenedor {
width: 500px;
border-radius: 10px;
height: 400px;
border: 1px solid #eee;
position: relative;
overflow: hidden;
background: inherit; /*<------- Here the ".contenedor" element inherits its parent's background*/
z-index: 2;
}
.contenedor::before {
z-index: -1;
content: "";
background: inherit;
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 2000px rgba(255, 255, 255, 0.5); /*<------- Here the magic happens making a blur inside */
filter: blur(10px);
}
With this HTML:
<body>
<div class="contenedor">
TEXT INSIDE
</div>
</body>
Now, I don't understand how the background-attachment works to mantain the background in the .contenedor element with inherit background.
I know that the background:inherit is to inherit all background properties from its parent, but what happen if I put
{
...
background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
background-size: cover;
background-attachment: fixed; /*<------ This is the most important part*/
...
}
instead inherit, It doesn't work.
PDT: Of course I understand the ::before pseudoclass to achieve the background and I'm using the first methos instead the second because is not compatible with Mozilla Firefox
Thank you all and sorry about my poor English
This question already has an answer here:
symetric div with background image without clip-path
(1 answer)
Closed 2 years ago.
I'm trying to skew two div, similar to this:
Desired result
However, there is always a white line in between. I tested with a negative top margin but it doesn't work in responsive.
My result
with this code:
...
<div class="img-box"></div>
<div class="map-box"></div>
<footer>...</footer>
...
.img-box {
background: url("https://via.placeholder.com/2560x2000/0000000") no-repeat;
background-size: cover;
background-position: center center;
position: relative;
min-height: 100vh;
clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}
.map-box {
background: url("https://via.placeholder.com/2560x600/DDDDDD") no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
position: relative;
height: 600px;
display-block;
}
footer{
height:100px;
background-color: #4D4E4C;
}
All you gotta do is add transform: translateY(10%); and z-index: 999; in your .img-box class, and it should work, let me know if it doesn't !
By the way, z-index doesn't strictly gotta be 999, I put the highest number just in case that something wont get over it later on if you decide to add more things to your code, you can put z-index: 1;, it will also work, or any number higher then 0 really :)
Just replace your css with this one :
.img-box {
background: url("https://via.placeholder.com/2560x2000/0000000") no-repeat;
background-size: cover;
background-position: center center;
position: relative;
min-height: 100vh;
transform: translateY(10%);
z-index: 999;
clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}
.map-box {
background: url("https://via.placeholder.com/2560x600/DDDDDD") no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
position: relative;
height: 600px;
display-block;
}
footer{
height:100px;
background-color: #4D4E4C;
}
been thinking of what would be the best way to achieve a background image with a sharp corners. I tried some css like border-radius and clip-path but no luck. I guess clip-path is the nearest possible answer but can't get it. Please see my sample below.
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-radius: 0 0 45% 45%;
}
<div class="main-header">
<br>
</div>
I'm looking to have below image.
How about this approach?
JSBin
body {
background: white;
margin: 0;
}
.main-header {
background: url('http://www.stevensegallery.com/g/400/200') no-repeat center center;
background-position: center;
background-size: cover;
min-height: 480px;
position: relative;
}
.main-header::after {
content: '';
display: block;
position: absolute;
background: transparent;
/* You can play around with these numbers to adjust the curve */
bottom: -4rem;
left: -25%;
width: 150%;
height: 400px;
border-bottom: solid 4rem white;
border-radius: 0 0 50% 50%;
}
<div class="main-header">
<br>
</div>
You can use below code for it
Add border-bottom-left-radius:60% 30%; border-bottom-right-radius:60% 30%; css. You can play with radius properties to know how it works..
.main-header {
background: url('http://placehold.it/150x150') no-repeat center center;
background-position: 0% 33%;
background-size: cover;
min-height: 480px;
border-bottom-left-radius:60% 30%;
border-bottom-right-radius:60% 30%;
}
<div class="main-header">
<br>
</div>
if you can use image by img, not background. I think you can try "clip-path" as below.
Codepen example
HTML:
<div class="main-header">
<img src="http://placehold.it/150x150">
</div>
CSS:
img {
-webkit-clip-path: circle(100% at 50% 0);
clip-path: circle(100% at 50% 0);
}
and this site is useful to make clip-path (http://bennettfeely.com/clippy/)
Okay, my problem is, I have a semi-transparent background-color on top of an image background. But when the computer screen is to big and page becomes longer vertically then horizontal the background-color stops after the content ends.
Example: background-color end before the end of the page.
I have looked everywhere and tried it all (height: 100%; height:100vh; bottom:0; margin:0; etc.). 100% does nothing, when using 100vh the background-color stops when I scroll down, bottom/margin:0; nothing.
The code my using is this.
html {
background: url(../images/back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background-color: rgba(0, 34, 62, 0.7);
margin: -0.5px;
font-family: verdana, sans-serif;
color: #b9c8d4;
text-align: center;
}
To see the website and the whole code go to: http://bienivitesse.com/juluwarlu/
If anyone knows any way to solve this, please let me know.
You have applied your main background to the html tag directly. While possible, it is not such a good idea to be styling it directly, always use the body or direct-descendants for the sake of good practice.
I think you can't stack a color on top of an image using the background property, but what you can do is - you can set the blue background using css pseudo-elements.
You will have to fiddle with the z-index property to get the divs to appear in the right order, so they won't be stuck under the color as well.
e.g.
html {
font-family: Arial, sans-serif;
}
.container {
background: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg') no-repeat center center/cover;
padding-bottom: 20rem;
position: relative;
z-index: 1;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 34, 62, 0.7);
}
.wrapper {
width: 70%;
margin: 0 auto;
z-index: 2;
position: relative;
}
.content {
padding: 4rem;
color: #fff;
background: purple;
z-index: 3;
}
<div class="container">
<div class="wrapper">
<div class="content">CONTENT</div>
</div>
</div>
I created a responsive page which has a box with text and blurred background. The page is available here on JSFiddle.
The problem is: .content element is not visible without setting its opacity to 0.99. Why?
HTML
<div class="content-box">
<div class="content-bg"></div>
<div class="content">
<p>Text with blurred background</p>
<p>Text with blurred background</p>
</div>
</div>
CSS
body {
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
overflow: hidden;
}
.content-box {
position: relative;
width: 300px;
overflow: hidden;
}
.content-bg {
position: absolute;
background-size: cover;
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
filter: blur(5px);
-webkit-filter: blur(5px);
}
.content {
border-radius: 10px;
z-index: 100;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0.99999; /* Does not work without this wtf */
color: white;
}
.content :first-child { margin-top: 0px }
JS
function updateBackground() {
var contentBox = $(".content-box");
var bg = $(".content-bg");
bg.css("left", -(contentBox.offset().left));
bg.css("top", -(contentBox.offset().top));
bg.width($(window).width());
bg.height($(window).height());
}
$(window).resize(function() {
updateBackground();
});
updateBackground();
Why does the code not work without opacity?
This is because your content element seems to be behind the content-bg element. The z-index has no effect because there is no position property assigned to it.
Why does it work when opacity of 0.99 is added?
As mentioned by BoltClock in this answer, adding a opacity less than 1 automatically creates a new stacking context (similar to adding z-index to a positioned element). This brings content element forward and thus it gets displayed.
What is the ideal solution?
Adding position: relative would make the z-index work as expected (which is bring the element above content-bg) and that would solve the issue.
function updateBackground() {
var contentBox = $(".content-box");
var bg = $(".content-bg");
bg.css("left", -(contentBox.offset().left));
bg.css("top", -(contentBox.offset().top));
bg.width($(window).width());
bg.height($(window).height());
}
$(window).resize(function() {
updateBackground();
});
updateBackground();
body {
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
overflow: hidden;
}
.content-box {
position: relative;
width: 300px;
overflow: hidden;
}
.content-bg {
position: absolute;
background-size: cover;
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
filter: blur(5px);
-webkit-filter: blur(5px);
}
.content {
position: relative; /* add this */
border-radius: 10px;
z-index: 100;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
.content:first-child {
margin-top: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-box">
<div class="content-bg"></div>
<div class="content">
<p>Text with blurred background</p>
<p>Text with blurred background</p>
</div>
</div>