I'm just learning Bootstrap and trying to figure out a good way to display content with an opaque background image. I'm currently using a "well" but don't have to. I can get the image "inside" the well and opaque but I can't get it "behind" the other content. Here is a small sample of the html:
.background1{
background-size:cover;
opacity: .25;
max-width: 1130px;
}
<div class="well">
<div class="row">
<img class="img-rounded background1" src="/Images/housing-4-1213183.jpg" alt="housing" />
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>
If there is a better class to use for the content please let me know.
This should do it for you. Bootstrap doesn't have a component for this, so you're stuck making it yourself.
How it works:
By putting the img as the first child in the parent container, it gets drawn first. The absolute positioning guarantees it fills the parent container size, and the container's relative position means the children's absolute are relative to the parent container. (otherwise, the image would be absolute compared to the body, and fill up the entire window). Then, the Text is drawn, and as it is defined AFTER the image, rendered next, drawing on top of the image.
.covered {
position:relative; /* make a new "render context", so absolute positioning is relative to this parent container */
padding:30px; /* only needed for this demo */
}
.covered-img {
background:url('https://source.unsplash.com/random/800x600');
opacity: .25;
background-size:cover; /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
background-position:center; /* vs the top-left that is default */
position:absolute; /* take me out of the render context! let me define my own positioning */
top:0;bottom:0;left:0;right:0; /* this could also work with width:100%; height:100%;, but is simpler */
}
<div class="row">
<div class="col-xs-12 covered">
<div class="covered-img"></div>
<h3>Dat content doe</h3>
<p>So much glorious content</p>
</div>
</div>
try :
.background1 {
background:url('/Images/housing-4-1213183.jpg');
background-size:cover;
opacity: .25;
max-width: 1130px;
}
and
<div class="well">
<div class="row">
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>
If you only want the background image (and not the text) to appear translucent try this:
.background1 {
background-image: linear-gradient(to bottom, rgba(255,255,255,0.3)0%,rgba(255,255,255,0.3) 100%), url("/Images/housing-4-1213183.jpg");
background-size:cover;
max-width: 1130px;
}
and in the HTML you'd want the div surrounding the content like this:
<div class="well">
<div class="row">
<div class="background1">
<h2>Section Title Here</h2>
<p>This is just a place holder for text content that would be showed on top of the desired image.</p>
</div>
</div>
</div>
Image faded in the background and text on top of it which is not faded. I believe if this is what you are looking for.
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.container {
position:relative;
left:100px;
top:100px;
}
.container h3 {
position:absolute;
top:50px;
left:50px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQBK3FmyjIENz16NWEl1iJcIWj8I5n8hs-rl5JPixzw-XppNfKx" alt="Forest" width="170" height="100">
<span>
<h3>Hello
</span>
</div>
</body>
</html>
the background image css should be for the container element, and not as a tag inside the content...
<div class="image">
Text Content <!-- Right -->
</div>
<div>
<img class="image" /> <!-- Wrong -->
Text Content
</div>
.image{
background-image : url(.../);
}
Related
I have a bootstrap 4 page with an image that can be changed by the user interacting with several dropdowns. Based on the selected options, the image source is changed. The images are fairly large, so loading the requested image takes some time. I'd like to display a loading spinner on top of the image while the new image is being loaded, so the user knows that their action had some effect.
It seems like the built-in bootstrap spinners need their own div, so I thought a gif like this could work if placed on top of the image: https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.webp However, I'm not sure how to place it on top of the image and trigger the events necessary to show/hide it. Since my columns are not fixed-width, I want to display the spinner on top of the image rather than swapping the image source for the spinner, so all of the content remains in the correct positions.
Example code:
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-auto" style="background-color:red;">
<h2>Column 1</h2>
</div>
<div class="col-12 col-lg-auto" style="background-color:green;" >
<h2 class="header-2">Column 2</h2>
<img class="img-fluid" src="https://via.placeholder.com/500x350">
</div>
<div class="col-12 col-lg-auto" style="background-color:blue;">
<h2>Column 3</h2>
</div>
</div>
</div>
First, right after the tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your CSS:
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
Then, add this javascript to your page (preferably at the end of your page, before your closing </body> tag, of course):
$(window).load(function() {
$('#loading').hide();
});
</script>
Finally, adjust the position of the loading image and the background-color of the loading div with the style class.
This is it, should work just fine. But of course you have to have an ajax-loader.gif somewhere. Freebies here. (Right-click > Save Image As...)
I am creating a responsive site with a fixed header and navbar and a rotating banner on the homepage. The banner is made using some javascript and css position values. So the header, navbar and rotating banners work fine but because the banners have width:100% and height:auto attributes they obviously expand and contract based on the window size or device. When I try to add content below I don't know what to do in order to keep it snug under the banner when I need to use position:absolute or relative and a top value for the content to appear. I've tired using a % but that doesn't seem to work.
JSFiddle
.header {
height:74px;
width:100%;
}
.navbar {
height:24px;
width:100%;
}
#banners {
position:relative;
}
#banners img {
position:absolute;
z-index:1;
top:98px;
width:100%;
height:auto;
}
#banners img.active {
z-index:3;
}
<div class="header"></div>
<div class="navbar"></div>
<div id="banners">
<img src="images/banner1.jpg" class="active" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
</div>
<div id="content">
</div>
I have user photo which I want to put on top other image, so as to make that image complete.
Here is my code
<div id="containerDiv">
<figure>
<img id="someImage" src="../images/someImage.gif" >
</figure>
<div id="buttonDiv">
<button>Done</button>
</div>
</div>
I have other image which I am taking from cache and putting in some
<img src=cachedImage />
I want to style it so that I can put the cached image on top of someImage also The entire containerDiv should be responsive to the browser window. So, I want to get the css part of this. I tries using relative and absolute positioning
<style>
#containerDiv{
position:relative; width:100%; height:300px;
}
#someImage{
position:absolute; top:10px; left:100px;
}
#buttonDiv{
position:absolute; top:100px; left:200px;
}
</style>
I want the button to be responsive with the someImage too. But it does not move along with the image. Also the cached image should be in sync with someImage. Thanks in advance.
i am not aware with your code but try this hope this helps you
<div class="div on which you want to show overlay">
<div class="overlay overlay-div">
<center>
<div class="overlay-content"><p>your overlay content,img goes here</p>
</div>
</center>
</div>
</div>
and css for overlay is :
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
you can show overlay div on mouse hover/in/out events.
sorry if the context already exists in other SO thread. I didnt found anyone, so I am posting it.
I have two elements(tabs) in the container(body) both are overflowing. when I try to scroll one tab, the hidden tab content also scrolling. I think, this is because both elements bound to the window.
<div class="header">
<ul>
<li data-tabid="tab1" class="tab">Tab1</li>
<li data-tabid="tab2" class="tab">Tab2</li>
</ul>
</div>
<div class="tabContainer">
<div class="tab1 tabpanel">
<!-- overflowing content -->
</div>
<div class="tab2 tabpanel">
<!-- overflowing content -->
</div>
</div>
CSS
body{
height:100%;
overflow-x:auto;
}
.header{
position:fixed;
top:0px;
height:50px;
}
.tabpanel{
position:absolute;
top:50px;
}
Demo
How to prevent scrolling on hidden element?
Here is a working demo, the solution is come up with setting both ends fixed and scrolling content. This should give effect like bound to the container.
.tabpanel{
position:absolute;
top:0px;
bottom:0px;
display:none;
min-height:100%;
height:auto;
width:100%;
overflow:auto;
}
.tabpanel .inner{
width:100%;
height:150%;
margin-top:60px;
}
http://jsfiddle.net/kongaraju/P6XWH/2/
Bascially you didnt set the height of your tabs, and neither did you apply an overflow to it. Doing that would solve the issue.
If you prefer to have the tabs 100% height, you would need a div within a div. In the outer div set your 100% height, in the inner div set a top padding of the height of the tab-selection.
Like this:
<div class="tab">
<div class="inner">
* tab content *
</div>
</div>
With css
.tab { height:100%; }
.inner { margin-top:20px; overflow:auto; }
I want a basic full width layout with a 250px sidebar on the right. Here's roughly what I want:
<-------Content-------><--250px sidebar-->
<---------------100% width--------------->
Is this possible without Javascript or tables?
Yes, of course:
see http://jsfiddle.net/whTwg/4/
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<div id="sidebar">Sidebar</div>
</div>
<div id="main-wrapper">
<div id="main">Main</div>
</div>
</div>
CSS:
#wrapper{
overflow:hidden;
}
#main-wrapper{
overflow:hidden;
}
#sidebar-wrapper{
float:right;
width:250px;
max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
background:#aaf;
border:10px solid blue;
}
#sidebar{
background:#faa;
border:10px solid red;
}
Note: instead of #wrapper{overflow:hidden} (or something different than visible), you could add <div style="clear:both"></div> after main-wrapper.
Edit:
You are right, I forgot to add #main-wrapper{overflow:hidden;}. I have fixed the link and the code.
<div style="float: left">
..... content ......
<div>
<div style="float: right; width: 250px;">
..... sidebar .....
</div>
<div class="clear"></div>
... other content
This is the CSS for the class="clear":
div.clear {
clear:both;
}
You can set the first div width when you see how much space you have.
Is this helpful?