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>
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.
I'm trying to overlap two images in CSS: the first one is a "background" image of the main menu and the second is the "cover" of the front page. The issue is that the first one is a png with transparency and it needs to display above the cover (right now, it doesn't goes beyond the div container).
Right now the result is this:
But the first image, the one under #menu .container-fluid is this:
The current code:
HTML
<section>
<div id="menu">
<div class="container-fluid">
<!-- Content of menu -->
</div>
</div>
<div id="portada">
<figure class="proporcion-fija-indice"></figure>
</div>
</section>
CSS
.proporcion-fija-indice {
display: block;
margin: 0;
padding-top: 48.30%; /* 2026px/4194px = 0.4830 */
background-image: url('../img/portada.jpg');
background-size: cover;
background-position: center center;
}
#menu .container-fluid {
background-image: url('../img/header.png');
min-height: 125px;
}
Any ideas of how to achieve the desired result?
Have you tried making the header higher, and setting a negative margin-top on proporcion-fija-indice?
.proporcion-fija-indice {
display: block;
margin: 0;
padding-top: 48.30%; /* 2026px/4194px = 0.4830 */
background-image: url('../img/portada.jpg');
background-size: cover;
background-position: center center;
margin-top:-50px;
}
#menu .container-fluid {
background-image: url('../img/header.png');
min-height: 150px;
}
You can use z-index
#menu .container-fluid {
background-image: url('../img/header.png');
min-height: 125px;
z-index:1;
}
another approach would be using position absolute in the #menu...this might need some adjustments..
This is an example of how you can make it work :
#menu {
background-image: url("https://i.stack.imgur.com/zRInk.png");
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
background-repeat: no-repeat
}
#portada {
background-image: url("https://cdn-images-1.medium.com/max/1500/1*d2MAPp7120q_8x6Ue8KYmQ.png");
width: 100%;
height: 100%;
z-index: -2;
position: absolute;
top: 0px;
left: 0px;
background-repeat: no-repeat
}
<section>
<div id="menu">
<div class="container-fluid">
</div>
</div>
<div id="portada">
<figure class="proporcion-fija-indice"></figure>
</div>
</section>
I have a <div> with a background image and I'd like the background image to have a filter applied. But I'd also like the div to contain a <p> tag which overlays the image -- and I DONT want the <p> to have that same filter.
How do I clear the filter set by the <div> in the <p>?
What I've got so far:
<div className="artistDetailImage" style={{backgroundImage: url(${this.props.artistImage})`}}>
<p className="artistDetailText">{name}</p>
</div>
.artistDetailImage {
background-size: cover;
background-position: top;
width: 100%;
height: 300px;
filter: contrast(60%);
}
.artistDetailText {
width: 100%;
font-size: 20px;
text-align: left;
padding-left: 5px;
position: relative;
top: 240px;
filter: none; //Have also tried contrast(100%), brightness(1), etc.
color: white;
}
This answer seems to work, but I was hoping there was a better way to do it.
https://stackoverflow.com/a/32677739/3010955
You won't be able to reset the filter for the child element, but you can encase both in a container div, then position the <p> accordingly.
.container-div {
position: relative;
}
.artistDetailImage {
background-size: cover;
background-position: top;
width: 100%;
height: 300px;
filter: contrast(60%);
}
.artistDetailText {
width: 100%;
font-size: 20px;
text-align: left;
padding-left: 5px;
position: absolute;
top: 240px;
color: white;
}
<div class="container-div">
<div class="artistDetailImage" style="background-image: url('http://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg');">
</div>
<p class="artistDetailText">NAME</p>
</div>
I have a div which has a background of a map. The map is centred and has a background size of 'contain'. The page is responsive so when the window resizes, so does the map. I need to be able to have a div on top of a certain country on the map, and on resize of the background map, the div stays directly on top of it.
So far I have
<div id="map-holder">
<div class="content">
<div class="placeholder"></div>
</div>
</div>
The div with the class of placeholder is the div i wish to keep on top of a certain country. The div with map-holder for ID is the div with the map background. Content is just to keep it all in place.
CSS
.content {
text-align: center;
width: 1200px;
margin: 0 auto;}
#map-holder {
position: relative;
height: 1000px;
width: 100%;
background: #F0F0F0;
background-image: url(../images/image-mapster.min.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
padding: 30px;
}
.placeholder {
position: absolute;
right: 30px;
background: #fff;
width: 80px;
height: 50px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
padding: 0;
cursor: pointer;
}
.placeholder img {
width: 100%;
height: 100%;
padding: 0;
}
.placeholder:before {
position: absolute;
top: 30%;
left: 45%;
font-weight: bold;
content: '+';
}
The only solution I can think if actually putting an image over the map.
You can do this by having multiple CSS backgrounds. Just change your code for #map-holder to this:
#map-holder {
position: relative;
height: 500px;
width: 500px;
background: #F0F0F0;
background-image: url(this_image_goes_on_top.png), url(your_map.jpg);
background-size: contain, contain;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
padding: 30px;
}
I made a little JSFiddle out of your code for demonstration: https://jsfiddle.net/zamofL9g/1/
Basically, it's a little difficult, as I recall, when using background images.
Since the image is, technically speaking "content" you can use an inline image and suitable wrapping divs. The 'pins' can then be positioned using % based positioning values.
Here's a Codepen demo I made some time ago. This one has a tooltip too!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
width: 90%;
margin: 10px auto;
position: relative;
}
.map img {
max-width: 100%;
}
.box {
width: 2%;
height: 5%;
background-image: url(http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 38%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: -25%;
left: 110%;
width: 300%;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
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.