I have a fixed header with a full screen background image under that my sections. what i am trying to do is if i have a alert it will echo above the whole page pushing down the header and hero. but it either wont show up or when i do get it to show it wont stay fixed and scrolls with the page.
.sitrep {
top 0;
height: 50px;
width: 100%;
position: fixed;
z-index: 10000;
}
.siteHeader {
min-height: 76px;
height: 76px;
overflow: visible;
background-color: #000;
color: #f4f4f4;
position: fixed;
top: 0;
z-index: 10000;
}
#hero {
height: 100vh;
}
.hero {
background: url(images/hero-bg.jpg) no-repeat top center;
background-color: #000;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#hero-content {
position: absolute;
width: 100%;
bottom: 0%;
}
#hero-content a {
background-color: #131313;
padding-top: 10px;
height: 40px;
display: block;
font-size: 12px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
#hero-content img {
display: block;
margin-top: 2px;
max-height: 145px;
margin-right: auto;
margin-left: auto;
margin-bottom: 53px;
padding: 5px;
}
<div class="sitrep">
<div class="alert-status">
<div class="info">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>Announcement!</strong> anouncment goes here.
</div>
</div>
</div>
<div id="siteHeader">my header</div>
<!-- Hero Unit -->
<div id="hero" class="hero">
<div id="hero-content">
<img src="content/images/logo-dt.png" class="img-responsive">
<a class="button" role="button" href="#base">Learn more</a>
</div>
</div>
You are mixing up classes and ID's.
In your HTML, you give the element the ID of sitrep, whereas you are giving the styles to the elements with the class of siterep.
Try either of the following options and you'll be set :
Changing the element attribute: <div id="sitrep"> to <div class="sitrep">
Changing the CSS to fit the proper elements: .sitrep { to #sitrep {
Happy coding !
Related
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>
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'll try to explain this the best that I can. I'm working on a website right now and I want a background image of one of my divs to fall behind the footer.
I've got it working when the image has a height of 450px but when I try to change it to 350px there is white space between it and the footer. As if there is 100px of space between it and the bottom of the page now.
In Chrome it looks fine no matter the size, but all other browsers it creates white space.
Here is my current HTML and CSS for the footer div and the div that is not working properly.
<div class="testimonials">
<div class="col-md-8 text-center">
<?php dynamic_sidebar( 'testimonial-widget' ); ?>
</div>
<div class="col-md-4">
</div>
</div>
<footer class="navbar-bottom">
<div class="row">
<div class="col-md-12 text-center">
<p class="footer-content">Some content...</p>
<p class="footer-content-mobile">Some content...</p>
</div>
</div>
<img src="/wp-content/themes/tct/inc/assets/footer.png" />
</footer>
.testimonials {
background-image: url('/wp-content/themes/tct/inc/assets/mug.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 350px;
margin-bottom: -300px;
font-size: 24px;
}
footer {
word-wrap: normal;
position: absolute;
bottom: 0;
width: 100%;
}
footer a {
color: #ffffff;
}
footer a:visited {
color: inherit;
}
footer a:hover {
color: #404040;
}
#media (min-width: 981px) {
footer img {
height: 300px;
width: 100%;
top: -9999px;
z-index: 10;
}
.footer-content-mobile {
display: none;
}
}
.footer-content {
color: #ffffff;
position: absolute;
left: 0;
right: 0;
top: 250px;
margin: 0 auto;
font-size: 20px;
padding-bottom: 10px;
}
.bullet {
margin-left: 20px;
margin-right: 20px;
}
And lastly, here are screenshot of how it's supposed to look (it looks fine in Chrome) and how it's not supposed to look (how it looks in all other browsers).
Correct:
Incorrect:
Hopefully I explained everything enough so you understand my problem. Let me know if I need to provide any additional information.
Links to the images that I am using:
Mug: http://i60.tinypic.com/f4g3t3.jpg
Footer: http://i59.tinypic.com/xfq6x5.png
Try to wrap all this into another container and set explicit height to it and position: relative
.wrapper {
height: 370px;
position: relative;
overflow: hidden;
}
.testimonials {
background-image: url('http://oi60.tinypic.com/f4g3t3.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 350px;
margin-bottom: -300px;
font-size: 24px;
}
footer {
word-wrap: normal;
position: absolute;
bottom: 0;
width: 100%;
}
footer a {
color: #ffffff;
}
footer a:visited {
color: inherit;
}
footer a:hover {
color: #404040;
}
#media (min-width: 981px) {
footer img {
height: 300px;
width: 100%;
top: -9999px;
z-index: 10;
}
.footer-content-mobile {
display: none;
}
}
.footer-content {
color: #ffffff;
position: absolute;
left: 0;
right: 0;
top: 250px;
margin: 0 auto;
font-size: 20px;
padding-bottom: 10px;
}
.bullet {
margin-left: 20px;
margin-right: 20px;
}
<div class="wrapper">
<div class="testimonials">
<div class="col-md-8 text-center">
<?php dynamic_sidebar( 'testimonial-widget' ); ?>
</div>
<div class="col-md-4">
</div>
</div>
<footer class="navbar-bottom">
<div class="row">
<div class="col-md-12 text-center">
<p class="footer-content">Some content...</p>
<p class="footer-content-mobile">Some content...</p>
</div>
</div>
<img src="http://oi59.tinypic.com/xfq6x5.jpg" />
</footer>
</div>
I managed to find a solution that works for me for now. I'm sure it's not the way to go but it did help.
I added a negative margin-bottom of 100px to my content wrapper and that seemed to do the trick. However, that then screws up Chrome and Safari because they were rendering it properly before. So I used a conditional comment to set the bottom-margin to 0 in Chrome and Safari.
Other answers are of course welcome though!
increase value of height
.testimonials {
background-image: url('http://i60.tinypic.com/f4g3t3.jpg');
background-size: cover;
background-position: 100% 70%;
background-repeat: no-repeat;
height: 560px; //in my case
margin-bottom: -300px;
font-size: 24px;
}
or try it
footer {
word-wrap: normal;
text-align: center;
position: absolute;
bottom: 110px;
width: 100%;
}
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.