How can I edit my css to adjust the opacity on the background image in the hero unit without affecting the opacity of the text etc in the hero unit? Here is the draft site (yes i'll be paying for proper version of the photo): site
The easy answer is to take your .jpg, and create a .png with it that has your opacity already applied.
One way would be to move your hero text outside of the hero unit and use position:relative to place it where you want...
CSS
.hero-unit {
background-image:url('..');
height:300px;
opacity: .5;
}
h1 {
position: relative;
top: -350px;
left: 40px;
color:#fff;
}
HTML
<div class="container">
<div class="hero-unit">
</div>
<h1>Hello Hero Text</h1>
</div>
Demo on Bootply
This example assumes your hero text it contained in an H1, but it could be in any container outside of the hero.
Related
<div class="container">
<div class="fullscreen">
<div class="textbox">Testing</div>
</div>
</div>
I'm trying to have an image fully show up based on the size of a screen, and to have text ("Testing" in the textbox class) show up in a precise designated area in the image, as shown above.
Trying to get the above to work with this codepen, but I am defeated to admit that after an hour of fiddling with css, I am nowhere close.
It is pretty frustrating that css doesn't seem to work as expected, where the image doesn't seem to want to nest to full height etc.
I would like to suggest if you add image using img HTML tag you have better control on image in relation with "Testing" text. Please check below my snippet. You can adjust position of "Testing" by "top" position on ".textbox" class :
.container{
min-height: 100%;
margin: 0;
padding: 0;
}
.fullscreen{
width: auto;
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
.textbox{
position:absolute;
top:55%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index:3;
text-align:center;
}
<div class="container">
<div class="fullscreen">
<img src="http://print.drawmaticar.com/preview.jpg" style="width:100%;"/>
<div class="textbox">Testing</div>
</div>
</div>
Try this:
background: url('path/to/img.jpg') no-repeat center center / cover;
Normally, if you call the image in background means need to add the padding-bottom in percentage.. It means the image height/width*100
css
.fullscreen {
padding-bottom: 129.411%;
}
Backgorund Image
you have to make background-size:cover instead of 100% and make height:100vh to make it visible.
Image cover the background color of DIV but text is showing.
My code is
<div id="testing">
<img src="https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?dpr=1&auto=compress,format&fit=crop&w=1350&h=&q=80&cs=tinysrgb&crop=">
<div id="sample">
Text
</div>
</div>
CSS is
#testing {
width: 200px;
height:150px;
}
img {
width:200px;
height:150px;
}
#sample {
margin-top:-15px;
background: black;
color: white;
text-align:center;
}
The result is showing like
You can find the code at
https://jsfiddle.net/cz605rc5/
It can solve with background css for div.
But I prefer to use img and want to cover black background label at the bottom of the image.
You can add a transparento overlay over your image tag since, it will be transparent the image will act as a background..
Fiddle
.overlay{
position:absolute;
top:0px;
left:0px;
width:100%;
min-height:100%;
}
Then you can move the text inside the overlay as you wish..
Since we are in 2017 i think you should first change the HTML code:
<figure>
<figcaption><span lang="en">image title</span></figcaption>
<img src="img.png" alt="Alternative Text" / >
</figure>
Now for CSS:
All you need is to make figcaption size as the image size.
Then make it position absolute, change it's z-index higher than the img, and set it's background to gradient.
Last thing is to place the span in some place: set it's position to "absolute" and place it (for example: left: 5px; bottom: 15px;)
If you want the full css just ask (:
Line height is causing the issue. You can add a line-height: 0; to #sample, or you can change the line height of the body. You could even enclose the text in some tags and apply it to that.
At the end of my post I provide the layout for the question.
I have a layout that has two columns, sort of, a navigation sidebar that is not always open (col0) and a main area (col1) that is always open. The main area displays content. Finally, I have a footer that sits right below the highest level of the page.
Inside the main or content area there is a transition component that presents the next routed component using CSS transitions.
What I need to do is to get the footer to be a footer, that is, to be strictly at the bottom of the scroll position of the screen and the containing div. That doesn't mean fixed because you can scroll.
I would like to do this in CSS but I cannot get it to go and I am feeling a bit tempted to have it read the height and update before the component is mounted etc. Is there a better way?
Here is a react Component render() function with plenty of stuff deleted for your convenience:
<div style={prepareStyles(styles.heightHundred)}>
<ChromeHelmet />
<AppBar ... yada .../>
<div style={prepareStyles(styles.root)}>
<div style={prepareStyles(styles.content)}>
<EasyTransition
path={this.props.location.pathname}
initialStyle={{opacity: 0, transform: 'translateY(-100%)'}}
transition="opacity 0.2s ease-in, transform 0.3s ease-in-out 0.3s"
finalStyle={{opacity: 1, transform: 'translateY(0%)'}}
leaveStyle={{opacity: 0.9, transform: 'translateY(500%'}}
>
{ this.props.children }
</EasyTransition>
</div>
</div>
<AppNavDrawer />
<Footer
style={prepareStyles(styles.footer)} />
</div>
Edit
When I try to use flex I can tell it is close but it has no effect because the sidebar is displayed with position: fixed; and some fancy CSS stuff inside the React component that I'm afraid to touch. But when I undo that position: fixed, the footer is where it needs to be but the sidebar is wonky obviously...
I would recommend using flex-box layout. it is supported by most browsers (IE 10 and up, Edge, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android Browser, Chrome for Android).
just add these styles to the parent div
display: flex;
flex-flow: column no-wrap;
justify-content: space-between;
on the footer add
align-self: flex-end;
here is a GREAT explanation of flex and how it works. lots of really useful information here
What you’re looking for is the CSS Sticky Footer.
The HTML:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
The CSS:
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
overflow:auto;
padding-bottom: 180px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;
}
/*Opera Fix thanks to Maleika (Kohoutec)*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
I have an image which has to take full width. And I need to put a text and a button on top of it in a specific place. I looked over many topics but can not figure out how to make it fully responsive.
<div class"wrapper">
<div class="image-box">
<img src="x">
</div>
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>
so this is the layout but it can be changed if it gets me to the point I need.
If I understand correctly the parent div called wrapper should be set to position: relative and all the child divs to position: absolute, after that you just position all these child elements with top, left, right, bottom. So after testing this this is what I get. Since the image is always 100% of the viewport it gets smaller and smaller by height and width because of its aspect ratio. The text and button on the image just stays at a fixed place and after some point it goes out of the image.
Whats my mistake?
P.S found a lot of topics but still, I am messing something up. Thank you for your insights and help.
The image tag is used to create a separate element on the page. This is not really what you want... you want the content-box to have a background, right? Rather than using the image tag, use CSS to apply a background image.
here is a jsfiddle
.content-box {
/* set width and height to match your image */
/* if these are omitted, it will only be as big as your content, */
/* and only show that much of your image */
width: 200px;
height: 300px;
/* obviously, replace this with your image */
background:url('http://placecage.com/200/300');
}
<div class"wrapper">
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>
I think this is what you want. Also, this is a good occasion to use those HTML5 tags figure
and figcaption, but basically all you need is this kind of structure:
<div class="wrapper">
<img />
<div class="content-box">
<!-- Your content here -->
</div>
</div>
So what is happening here is that your wrapper's dimensions are fixed by the image, and then you position absolutely your content-box or the elements within. If you do not want to position them at the very top or bottom of your image, just use percentage values when positionning:
top: 10%;
figure {
position: relative;
}
figure img {
width: 100%;
height: auto;
}
figure figcaption {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
background: rgba(255,255,255,.7);
padding: 10px;
}
<figure>
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
<figcaption>
<h1>The image title</h1>
<p>This is the image caption</p>
</figcaption>
</figure>
Hey guys, I'm having some trouble with my css position. Basically I have a sidebar that is set to the left of the screen, which basically includes all my links for navigation. I want the sidebar to extend all the way to the bottom of the screen, no matter if the user minimizes or maximizes the browser, or their resolution. Even if the page happens to scroll I want the div to go all the way to the bottom. I'm having a lot of trouble with this and cannot get it to work correctly. Here is my code, if anyone spots the reason it is not working, any help is greatly appreciated.
HTML:
<div id="welcome">
Welcome <br> to My Site!<br>
<span style="color: red; ">(Beta)</span>
<div id="sidebar">Home</div>
<div id="sidebar">link</div>
<div id="sidebar">Link</div>
<div id="sidebar">Link</div>
<div id="sidebar">Link</div>
<div id="sidebar">Forum</div>
<div id="sidebar">About</div>
<div id ="sidebar">Requests</div>
<div id="sidebar" >"Pr0j3ct Un1ty"</div>
<div style="font-size: 20px;">Logged in as: <?php echo $_SESSION['username']; ?> </div>
<div id = "sidebar" >
Logout </div>
<div style=" font-size: 16px;">Account Settings</div>
<div style="margin-left: 10px; position: absolute; bottom: 0px; font-size: 16px;"><b>© jm1llz 2010</b></div>
</div>
CSS Page:
#welcome
{
width: 15%;
float: left;
background-color: darkgrey;
height: 100%;
text-align: center;
font-size: 24px;
font-family: Comic Sans MS;
font-weight: bold;
}
The best way is to use a background image. If you are not using a body background image now then the easiest is to create and image with the width of the sidebar.
body {
background-image: url(/images/bg.jpg); /* Wherever your image is located */
background-repeat: repeat-y;
}
That will make the image go all the way to the bottom regardless of how tall your sidebar actually is.
Then on your sidebar, just style the div to fit within the image you created. If it's all the way to the left like you say then all you should need to add to your style is the correct width and maybe some padding.
If you are using a body background image than create another div with...
div { width: 100%; height: 100%; } /* You may need a float: left; as well */
...and place the above background CSS inside the new div. You will then have to add that new div just inside the tag in your HTML.
easiest practical way is to throw a bg image on your element that contains your floating sidebar with the bg color/graphic that repeats vertically. make sure the container has overflow/clearfix.
I think you are asking "how do I make two columns the same height?"
If that is the question, there are various 'tricks' to do it via CSS (such as meder's recommendation) but these days I'd strongly suggest just using javaScript. It's fairly trivial especially if you are using something like jQuery.
ON document ready, grab the height of each div and then force the shorter one to a height equal to the taller one.