This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 3 years ago.
Hi I have <div class="jumbotron text-center"><nav>something</nav></div> this line of code and the jumbotron has some CSS effects something like
.jumbotron{
background: url("image-url") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background-size: cover;
height: 78vh;
filter: brightness(50%);
}
but all I want is only the jumbotron's background image gets the CSS effects, not the nav tag. currently, the nav tag inherits thefilter: brigtness (50%), is there anyway only the background-image gets the effect?
No, it's not possible. A filter will affect current element with all its contents (including children).
Therefore the way to go here is to move <nav> outside of .jumbotron, wrap them in a common relative parent and render <nav> above .jumbotron.
Proof of concept:
.relative {
position: relative;
}
.relative > .absolute {
position: absolute;
width: 100%;
top: 0;
/* making it visible */
background-color: rgba(255,255,255,.25);
border-bottom: 1px solid white;
color: white;
padding: 1rem;
box-sizing: border-box;
}
.jumbotron{
background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover;
height: 78vh;
filter: brightness(50%);
}
<div class="relative">
<div class="jumbotron"></div>
<nav class="absolute">something</nav>
</div>
Feel free to rename the classes and adjust to your particular needs.
Related
Hi guys i am trying to create this effect with bootstrap 3 :
The black color being a random image and then just a white strip on were I can put my text etc.
So far I have this :
HTML:
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
CSS
.parallax {
background-image: url("../img/c.jpg");
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
width: 800px;
}
However no matter what I change the width to for the container , it does not become smaller just the text inside of it does.
So again I am just looking to have a background image cover the whole browser and then just a white strip coming down but the width to be around 800px; so it leaves gaps on the side to see the image in the background
You can make use of min-width and max-width on container class. This ensures that when your browser is resized the sides are still visible by setting the width of the container to a relative (%) value. And the max-width limits it from extending beyond that. You can position the container using transform property in CSS and make an animation for the container to come from top and set its position to the vertical center of the webpage.
As far as the background is concerned, you can set the width or height to 100vw, 100vh or even % as you find suitable. This is just a demonstration.
.parallax {
background-image: url("http://via.placeholder.com/300x100");
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -300px;
background: white;
color: black;
min-width: 70%;
max-width: 800px;
height: 100px;
text-align: center;
animation: expand 2s linear forwards;
}
#keyframes expand {
0% {}
100% {
top: 50%;
transform: translate(-50%, -50%);
}
}
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
html
<div class="parallax">
<div class="cont">
hellowold
</div>
</div>
css
.parallax {
width: 100%;
height: 500px;
position: relative; // this is necessary
background: #000;
}
.cont {
position: absolute;
width: 100%; // for responsive it will take 100% width
max-width: 800px; // for bigger screen it will be max 800px
padding: 15px; // just for decoration
background: #fff;
box-sizing: border-box;
margin: 0 auto; // absoluted element center purpose
bottom: 0; // positioning at the bottom as per your image
left: 0; // absoluted element center purpose
right: 0;// absoluted element center purpose
text-align: center; // just for decoration
}
I have 5 divs which are responsible for website's background. When user hovers pointer on one of action divs, background changes. On desktop background image displays perfectly, but in mobile browser I have something like on screenshot - image repeats
I have this css
.page_background
{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 100%;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bg_def
{
background: url("/images/bg.jpg") fixed top !important;
}
#bg_kvadro
{
background: url("/images/bg_kvadr.jpg") fixed top !important;
display: none;
}
#bg_hotel
{
background: url("/images/bg_hotel.jpg") fixed top !important;
display: none;
}
#bg_palatka
{
background: url("/images/bg_base.jpg") fixed top !important;
display: none;
}
#bg_eat
{
background: url("/images/bg_rest.jpg") fixed top !important;
display: none;
}
Part of html code
<body>
<div class="page_background" id="bg_def"></div>
<div class="page_background" id="bg_hotel"></div>
<div class="page_background" id="bg_eat"></div>
<div class="page_background" id="bg_palatka"></div>
<div class="page_background" id="bg_kvadro"></div>
My question is: how to expand image to fit body?
Define the image as child, not as background.
I´m a CSS beginner. I´ve got two separate containers which should have one background image. I'm using z-index but I don´t know how to make it work.
<!-- Background Image -->
<div class="bg-img"><img class="img-responsive" src="images/bg/bgtriangle.png">
<!-- First Container -->
<div class="container-main">
<p class="font-relative">Headline 1</p>
</div>
<!-- Second Container -->
<div class="container-fluid" style="background-color: #574c5d; border-top: 2px solid #e57e22;">
<h4 class="text-center" style="padding: 5px;">Headline 2</h4>
</div>
</div>
The CSS is:
.container-main {
width: 100%;
height: 100%;
padding-top: 70px;
padding-bottom: 15px;
background: #453a4b;
background-size: cover;
z-index: 1;
}
.container-fluid {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
.bg-img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
z-index: 0;
}
How can I use this one bg-image in full width for two containers? Is that possible?
You need to set your image to the background-image of your bg-img instead of adding it as an HTML img element. Also, you do not need z-index at all for this - they can be removed from your CSS.
.bg-img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('images/bg/bgtriangle.png'); /* This */
}
EDIT:
If you want to move the background of the divs behind the background image, while keeping the content above it, you are going to get into a bit of a messy situation. You can do this by removing the contents from the divs, and then positioning all of them as absolute and using z-index (-1 behind image and 1 in-front of image). However, this means that you have to use top/left/etc. to position the contents back into their divs.
Here is a demo of what I accomplished tinkering a bit, maybe it will be helpful to you.
I'm trying to do a background image of 100% and have an image as the background. When I upload the image it goes to 100% but it cuts off have the picture. It makes the image wider than my screen. How do I fix it where the picture width is 100% but the image width fits the screen without getting cut off. Here is my tumblr to let you see what I mean (http://ophelialogy.tumblr.com/) and here is the full image to show you the full image and give you an idea for where it's cutting off (http://imageshack.us/a/img7/7103/khb3.png).
Here is my code:
CSS PART
/* --- HEADER --- */
#header {
top: 0;
left: 0;
width: 100%;
{block:IfAdjustableHeader}height:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}height:100%;{/block:IfNotAdjustableHeader}
position: fixed;
z-index: 10;
background-image: url('{image:header}');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* --- PAGE CONTENT --- */
#page {
{block:IfAdjustableHeader}top:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}top:100%;{/block:IfNotAdjustableHeader}
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
background: {color:Background};
z-index: 99;
}
.container {
margin: 50px auto 0px;
{block:If400Posts}width: 800px;{/block:If400Posts}
{block:If500Posts}width: 900px;{/block:If500Posts}
}
/* --- POSTS --- */
.postcol {
width: 540px;
margin-left: 240px;
}
.posts {
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}
.posts img, .posts li, .posts blockquote {
max-width: 100%;
}
HTML Part
<body>
<div id="header">
<div class="description">{Description}</div>
</div>
<div id="page">
<div class="container">
<div class="postcol">
{block:Posts}
<div class="posts">
</div>
this excellent blog post explains exactly what you need, without any third party tools:
http://css-tricks.com/perfect-full-page-background-image
also, there are some jQuery plugins for that, including:
https://github.com/jaysalvat/vegas
https://github.com/buildinternet/supersized
SO...
What cover does (in my mind) is take the background image and do it's best to use the most of it that it can depending on the height or width of the box it is in. There are 2 ways to deal with this. One way is to make the box the perfect ratio for the image. The other is to actually use an img that will stretch the box to it's exact size. Here is how to do each. The plus of the background-image version, is that you can easily only serve a small version to small screens with an #media rule.
HTML
<header class="container global-header"></header>
<header class="container global-header2">
<img alt="banner-thing" src="http://placekitten.com/400/100" />
</header>
CSS
html, body {
height: 100%;
margin: 0;
}
.container {
width: 100%;
float: left;
}
.global-header {
width: 100%;
/* this is hacky - but it is your answer */
height: 0;
padding-bottom: 25%;
background-image: url("http://placekitten.com/400/100");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* you should have this too */
background-position: center center;
}
.global-header2 {
width: 100%;
/* height will be determined by image size */
}
.global-header2 img {
display: block;
width: 100%;
height: auto;
}
FIDDLE
use:
background-image: url(../images/myimage.jpg);
background-size: cover;
Do you want the background image in the header or on the main page?
It is currently in the header.
Set the background image on the html tag if you want it to cover the whole page.
Nasser's link to do that is a good one (I would leave out the browser specific hacks though).
EDIT
AHH You're talking about width.
I think it might be something to do with the irritating slider tumblr have coming in from the right - it is about that much too stretched.
I suggest trying these styles on jsfiddler - or another separate site - you'll probably find it works fine.
I have a fullscreen cover background and I'm trying to get a footer over it which darkens the background. However I also need to put a picture on top of it which get darkened as well. I've tried to use z-index and sliced image with transparency but it was just blue and it didn't work.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
}
html {
background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
Any help much appreciated.
Edit:
I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And the CSS
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
background-image: url('footer-bkg.png');}
#footer-main {
left: 50%;
margin-left: -567px;
margin-top: -82px;
position: absolute;
color: white;}
I was able to resolve it simply by adding another div element above with a negative margin without the use of z-index at all
<div id="footer">
</div>
<div id="footer-main">
<img src="uqu-logo.png">
<p>Got question? Check our FAQ</p>
</div>
And the CSS
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
background-image: url('footer-bkg.png');}
#footer-main {
left: 50%;
margin-left: -567px;
margin-top: -82px;
position: absolute;
color: white;}
try adding
#footer { position: relative; z-index: 9999; }
Where exactly is this picture going? What div is it going into? Because right now if I'm understanding correctly, you just want a box which is on a layer above the background which has reduced opacity. [jsFiddle] Which it is technically already doing.
Can you give us the HTML markup as well? Or input it in a jsFiddle so we can see where the problem is.
Also if Z-indexes weren't working, make sure you are assigning a z-index to every element and not only the #footer.
#footer {
height: 100px;
opacity: 0.4;
background-color: #000000;
z-index: 999;
}
#img_div {
z-index: 1;
}