Might be an easy one can't get this to work. I've succeded in overlay a background image with a pattern but now the header is placed behind the pattern as well. I've tried to use z-index (as depicted in my code below) but it still not working. Any ideas?
Result
Index.html
<div class="content">
<div class="subheader">
<div class="container">
<h1>PROVIDE <br>CREATIVITY IN <br> YOUR BUSINESS</h1>
</div>
<div class="pixel-overlay"></div>
</div>
</div>
Style.css
.content .subheader {
width: 100%;
height: auto;
display: inline-block;
padding: 130px 0 0;
background: url(../images/landing.jpg) no-repeat 50% 0%;
position: relative;
background-attachment: fixed;
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-behavior: url(../js/backgroundsize.htc);
}
.content .subheader:after {
content: "";
background: url(../images/pattern/pattern.png) repeat;
background-size: 90%;
background-attachment: fixed;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 0;
}
.content .subheader h1 {
margin-top: 25%;
z-index: 100;
}
Try add position: relative; to the headline, like this:
.content .subheader h1 {
margin-top: 25%;
z-index: 100;
position: relative;
}
Your .content .subheader h1 have no position specified. Therefore, z-index will be useless.
Try adding position: relative:
.content .subheader h1 {
position: relative;
margin-top: 25%;
z-index: 100;
}
Related
So what I currently have is a parallax effect that works fine, but I can't figure out how to make one section "slide up" and reveal the next section, making it look like a smooth section transition. Currently my content on the second section just keeps scrolling down until it's in its place, and I can't seem to make it appear behind the first section. I currently have this: https://jsfiddle.net/165pw4ks/3/.
index.html:
<div class="parallax-wrapper">
<div class="frame-top"></div>
<section class="parallax-section part1">
<div class="frame-bottom"></div>
<div class="part1-sticky-container">
<div class="part1-sticky">
</div>
</div>
</section>
<section class="parallax-section part2">
<div class="part2-content">
<h1 class="part2-text">
Some text here
</h1>
</div>
</section>
</div>
style.css:
body {
margin: 0;
}
.parallax-wrapper {
top: 100vh;
}
.parallax-section {
position: relative;
}
.part1 {
background: url("https://place-hold.it/1920x1080") no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
z-index: 4;
}
.frame-bottom {
position: sticky;
z-index: 100;
top: calc(100vh - 40px);
height: 40px;
width: 100%;
background-color: #111;
}
.part2 {
margin: 0;
background: url("https://place-hold.it/1920x1080") no-repeat;
background-size: 100vw;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.part2-content {
position: sticky;
width: 30rem;
height: 5rem;
z-index: 1;
background-attachment: scroll;
background-color: transparent;
margin-left: calc(50% - 15rem);
top: calc(50% - 2.5rem);
}
.part2-text {
margin: 0;
color: white;
font-size: 32px;
text-align: center;
}
What I am attempting to make is something like on this picture:
Any help would be appreciated.
My background image isn't showing and I can't figure out why. I've already read through a few other threads but none of the suggestions are working.
The path to the background image is correct, that's not the problem. I've added a height and size/position etc.
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
background: url("links/slideshow/_anx_tote2.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
The background image should cover the right half of the screen.
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
width: 100%;
background-image: url("https://picsum.photos/200");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
You need to add 100% height for body and HTML.
The image doesn't show because there was no width and height set to #slideshow.
Adding percentage height to a div, a height has to be determined first.
For more information, you can see here.
Thus I have added height: 100vh; and width: 100% to #slideshow;
.images {
position: relative;
height: 100%;
width: 100%;
}
#slideshow {
display: block;
position: absolute;
background: url("https://i.imgur.com/WLimwqR.png");
background-size: contain;
background-repeat: no-repeat;
background-position: 100% bottom;
height: 100vh;
width: 100%;
z-index: -1;
}
<div class="images">
<div id="slideshow"></div>
</div>
#slideshow {
background: url(links/slideshow/_anx_tote2.jpg) no-repeat transparent;
background-size: cover;
height: 100%;
}
Trying to build out a hero style masthead with a transparent cover image, and a color tint overlay; then display some text on top of this. I am using bootstrap 3 as underlying framework.
I have my hero wrapped in a div, I then have two child div. One contains the background tint layer, the other contains the text/title.
The background div layer is breaking out of the parent wrapper div and covering the entire viewport below it. I'm not sure where i went wrong.
Fiddle of my broken attempt:
Fiddle
#page-title {
font-size: 2.2em;
padding: 20px 40px;
margin-bottom: 40px;
}
.bg-layer {
opacity: 0.75;
background-color: #f7f8fa;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.bg-wrapper {
background-image: url(/whatever.png);
background-position: right center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
}
<div class="bg-wrapper">
<div class="bg-layer"></div>
<header id="page-title">
<div class="container">
About Us </div>
</header>
</div>
Add high z-index on .bg-layer, beacuse bootstrap CSS navbar Class default z-index is 1000
.bg-layer {
opacity: 0.75;
background-color: #f7f8fa;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index:1001;;
}
https://jsfiddle.net/lalji1051/9b46x5yo/3/
All your code is absolutely fine, Just add this line position: relative;to the .bg-wraper class and you will get the desired result!
#page-title {
font-size: 2.2em;
padding: 20px 40px;
margin-bottom: 40px;
}
.bg-layer {
opacity: 0.75;
background-color: #f7f8fa;
background-color: #f005; /* just adding this for visibility*/
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.bg-wrapper {
background-image: url(/whatever.png);
background-position: right center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
/*Just this additionale property*/
position: relative;
}
<div class="bg-wrapper">
<div class="bg-layer"></div>
<header id="page-title">
<div class="container">
About Us </div>
</header>
</div>
my question is simple.
I have this page: http://vacanor.com/tests/lared
There is that image in the middle of the first section that floats on the screen. I want to stick that image in the first section preservating its position whenever I change the screen size. I've tryed everything but I can't.
Here is a video about what is bothering me: https://www.youtube.com/watch?v=U37_1cY8nAs
My html(including second section):
<div class="container-a">
<!--<div class="col-lg-12">-->
<div class="img-cover">
<center><img class="img-cover-i floating" src="img/logo-background.png" alt="Logo">
</center>
</div>
</div>
<!--</div>-->
<!-- Presentación -->
<div class="container-b">
<!-- <div class="col-lg-12">-->
<div class="ani">
<div class="intro">
<h1 class="animated fadeInDown animated-d-1 cd-headline slide">
Bienvenido a La Red
<small>
<span class="text-primary cd-words-wrapper" style="width: 207px;">
<b class="is-hidden">Construir </b>
<b class="is-hidden">Jugar</b>
<b class="is-hidden">Sobrevivir</b>
<b class="is-visible">Divertir-se </b>
</span>
<span>nunca será lo mismo.</span>
</small>
</h1>
</div>
</div>
</div>
And my css:
.img-cover {
margin: 0 auto;
width: 95%;
position: relative;
z-index: 10;
margin-top: 50px;
}
.img-cover-i {
position: relative;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
}
.container-b {
margin: 0 auto;
position: absolute;
width: 100%;
height: 100%;
z-index: -3;
top:100%;
}
I did not really understand your question, so here are 3 fixes to how I understood it.
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
}
The above code should make your image not get out of the div when resizing the screen, and below is an example of how to resize the image accordingly;
.img-cover-i {
position: relative;
height:calc(100% - 50px)
}
Also, if you want your Logo to follow the screen but not be visible outside the container a, use this code:
.img-cover-i {
margin-left:calc(50% - 237px);
position: fixed;
}
.container-a {
margin: 0 auto;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: -2;
background-image: url('../img/cover-background.jpg');
background-position: center;
background-repeat: none;
background-size: cover;
overflow:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
Also, if using this code, remove the that wraps the img in the html part.
I hope this helped.
Im working on a background image that is placed with inline styling, that has a red tint overlaying the image.
The problem occurs when the red tint is covering the content.
How would I make the red tint go under the buttons and text?
Please see JS Fiddle
Appreciate the help
#cover-wrap {
position: relative;
}
#cover-wrap .black-cover {
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
#backgrond-cover {
background-color: #37383a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 50px;
color: #fff;
position: relative;
}
#backgrond-cover .username {
font-weight: bold;
margin-top: 10px;
}
#backgrond-cover .location {
font-size: 14px;
}
#backgrond-cover .summary {
font-size: 14px;
margin-bottom: 20px;
}
if you want the buttons to be over the overlay red tint. then move the buttons above the plane of the red tint.
to achieve that you need to give a z-index to the button ( imagine z axis in graph) positive value brings it above and negative values push it down. But to give a relative positioning of z axis you also have to specify the css position to relative
add this css to the bottom of your code...
button{
position:relative;
z-index:10;
}
now this will target all buttons in the page. If you want to target only specific buttons, give the buttons an id or class.
Also there is a unclosed paragraph tag in your code < / p >. Not sure if you had a copy paste error or not
Try this onces..i had brought some changes which does what you want.
<div id="cover-wrap">
<div class="black-cover"></div>
<div id="background-cover" class="center">
<div id='box'>
<img src="img/people/heyfitty-girl-9.png" class="main-profile-pic img-circle"/>
<p class='username'>Cloud #3</p>
<p class="location">Birmingham</p>
<p class="summary">Hi, im Paul, Designer / Developer rocking out in Bham</p>
<button class="cheeky-kiss-btn">Cheeky Kiss</button><span class="or">or</span>
<button class="hangout-btn">Hang out</button>
</div>
</div>
</div>
<!-- html ends here -->
<!-- css looks like this -->
#cover-wrap
{
position: absolute;
width: 1350px;
}
.black-cover
{
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
}
#backgrond-cover
{
background-color: #37383a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 50px;
color: #fff;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg');
display: inline-block;
height: 100%;
width:92.6%;
}
#box
{
position: relative;
}
#backgrond-cover .username
{
font-weight: bold;
margin-top: 20px;
}
#backgrond-cover .location
{
font-size: 14px;
}
#backgrond-cover .summary {
font-size: 14px;
margin-bottom: 20px;
}
/*css ends here */
Sorry did not read the question. I've updated with the it now working. You need to se the z-index on all elements you want above the red grad or like I did wrap all of them in a div and position that above the grad. Note, need position on all elements you want to use z-index on.
http://jsfiddle.net/MatrixMe/8pmdzms8/1/
HTML
http://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg')">
<div class="content-wrapper">
<img src="img/people/heyfitty-girl-9.png" class="main-profile-pic img-circle"/>
<p class="username">Cloud #3<p>
<p class="location">Birmingham</p>
<p class="summary">Hi, im Paul, Designer / Developer rocking out in Bham</p>
<button class="cheeky-kiss-btn">Cheeky Kiss</button><span class="or">or</span>
<button class="hangout-btn">Hang out</button>
</div>
<div class="black-cover"></div>
CSS
/*Cover Info*/
#cover-wrap {
position: relative;
}
div.black-cover {
background-color: rgba(255, 0, 0, 0.5);
position: relative;
top: 0px;
z-index: 10;
width: 100%;
height: 100%;
}
.content-wrapper {
position: absolute;
z-index: 50;
width: 100%;
height: 100%;
left: 20%;
top: 20%;
display: inline-block;
}
#backgrond-cover {
background-color: #37383a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #fff;
position: absolute;
display: inline-block;
z-index: -1;
width: 100%;
height: 300px;
}
#backgrond-cover .username {
font-weight: bold;
margin-top: 10px;
}
#backgrond-cover .location {
font-size: 14px;
}
#backgrond-cover .summary {
font-size: 14px;
margin-bottom: 20px;
}
If you want to create overlay by making it absolute but it cover the content, you can play with z-index then. First set z-index of the container to 1, then add z-index -1 to the overlay. This should make overlay placed under the content.
.item{
background: url(https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/1824627/logotypes_1x.jpg);
background-size: cover;
width: 300px;
height: 300px;
position: relative;
z-index:1;
}
h1{color: white}
.item:after{
content:"";
background: rgba(255,0,0,.5);
position: absolute;
top: 0;
bottom:0;
left:0;
right: 0;
z-index:-1;
}
<div class="item">
<h1> content here</h1>
</div>
The snippet above is make use of after pseudo element to make the overlay rather dan using another HTML tag.
i have restructured your code, deleting unnesessary tag, you can check it out here http://jsfiddle.net/rzp318kb/6/
just add this
#backgrond-cover p, #backgrond-cover span, #backgrond-cover button, #backgrond-cover img {
position: relative;
z-index: 20;
}
and add z-index: 10; to #cover-wrap .black-cover. Should do the trick.