I'm trying to display a short image description at the bottom of an image, right now it looks like this: https://www.bootply.com/render/Gwde8WHtot
But i want the green background to align with the image (not the red border), meaning the width and height attribute of the text should respond to the image, not the container it is in.
This is my current code:
// CSS
.textoverimage {
position: absolute;
background: green;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
word-wrap: break-word;
text-align: center;
width: 100%;
height: auto;
bottom: 0;
left:0;
padding: 5px;
z-index: 5;
border-radius: 0px 0px 3px 3px;
}
// HTML
<div class="container">
<div class="row">
<div id="0" class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-12">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg">
<div class="textoverimage">Random</div>
</a>
</div>
</div>
</div>
Full example: https://www.bootply.com/Gwde8WHtot
Is there any way to achieve this? If the column/image resizes when you resize the browser, the text should be responsive as well. Any help is greatly appreciated! Thanks in advance.
You're almost there, you just need to add:
.d-block {
position: relative;
}
Since the anchor is wrapping around the image, you set a relative boundary there, meaning that a position: absolute inside that will be relative to those bounds.
You could set the ('.d-block mb-12') div as a position:relative and then make the text position:absolute (hoping that the div covers the entire image.
Once this is done you could use:
.textoverimage{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin: 0 auto;
}
then the parent div will be:
.d-block {
postion:relative;
width:100%;
height:100%;
}
That should work, hoping that the .d-block div has a parent div with a width/height set in PX if not drop the height and width attr and then you should be perfect.
Don't forget the Margin: 0 auto;
If it doesn't center absolute then maybe try adding
display:block; or display:inline-block;
Hope this helps
Related
Need to move heading tag little left say 5px over the div. I have tried some solution but heading is moving but the content is disappearing .
<div>
<div style="background: none;" class="taskdiv">
<a>
<img src="{{url+'/'+task.icon}}" class="img-fluid" />
<h5 id= "heading" class=" text-center">{{task.taskname}}</h5>
</a>
</div>
</div>
#heading {
left: -5px;
position: absolute;
word-break: break-all;
inline-size: 130px;
height: 50px;
}
I have a div which is like a rectangle box with a background color and a heading inside it, I need to move the heading a little left heading has a background color too so it will be like the heading box will be a little left of the div box like heading placed over div .
yeah just change the position to relative instead of absolute as absolute position break CSS default formatting context. "Run the code snippet below"
.taskdiv{
margin: 0 50px;
}
#heading {
background-color: red;
right: 40px;
bottom: 20px;
position: relative;
word-break: break-all;
inline-size: 130px;
height: 50px;
}
<div>
<div style="background: green;" class="taskdiv">
<a>
<img src="{{url+'/'+task.icon}}" class="img-fluid" />
<h5 id="heading" class=" text-center">{{task.taskname}}</h5>
</a>
</div>
</div>
You just need to give the z-index for heading then it will show there too and make the positive relative for div like this
. taskdiv{positive:relative}
#heading {
left: -5px;
position: absolute;
word-break: break-all;
inline-size: 130px;
height: 50px;
z-index:99
}
second this you can try without position
#heading {
margin-left: -5px;
height: 50px;
z-index:99
}
You need to give x, y position so top: -5px and left: -5px or (some amount)
Then adjust the z-index so it will appear on top of the div
z-index: 2
Absolute positioning is useful for breaking the element out of the flow
I'm not exactly sure what you are talking about but I might know. I think what you are talking about is the margin in the html thats there by default.
body, html {
margin: 0px;
}
This is my html:
<div id="Header">
<div id="logoContainer">
<a id='logoClick' href='/'></a>
<p id="welcome">Welcome</p>
<h1 class="logoText">first<img id="logoImage" src="image.jpeg" /><span id="second">second</span></h1>
</div>
</div>
and this is my CSS:
#logoClick {
width: 100%;
height: 100%;
z-index: 1;
display: block;
position: absolute;
}
#loginHeader {
font-family: consola;
width: 100%;
background-color: black;
color: white;
}
#logoContainer {
height: 10px;
width: 200px;
padding: 20px;
}
Form some reason, the link is taking up the width and height of the entire page and has a padding of 20px on the top-left and top.. Any idea why?
The link is positioned absolutely which removes it from the normal flow and positions itself relative to the next positioned element. The parent of the anchor is not a positioned element.
To contain the anchor, add position:relative; to #logoContainer.
depending on the effect you are trying to get, you can change the height/width of the link to inherit or you can change the position to relative
How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.
html:
<div id="sliderFrame">
<div id="slider">
<span id="slider-background">
<img src="/_images/rotating-banner/001.jpg" />
</span>
</div>
</div>
CSS:
#sliderFrame {position:relative;width:850px;margin: 0 auto;}
#slider {
width:850px;height:470px;/* Make it the same size as your images */
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider-background{
position:absolute;
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
width: 850px;
height: 470px;
z-index: 100;
}
link to live site: http://lltc.designangler.com/
try:
HTML:
<div id="wrapper">
<div id="img"></div>
<div id="overlay"></div>
</div>
CSS:
#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */}
make sure to adjust wrapper,img and overlay sizes, add your images etc'.
have you tried setting the opacity of the div element?
Edit:
After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?
I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:
<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
<div id="slider">
<img src="/_images/rotating-banner/001.jpg" />
</div>
</div>
CSS:
#overlay{
display:block;
position:absolute;
width: 850px;
height: 470px;
z-index: 2;
}
The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:
#sliderFrame {
position: relative;
width: 850px;
margin: 0 auto;
}
#slider {
width:850px;
height:470px;
background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider-background {
display: block;
position: relative;
width: 850px;
height: 470px;
z-index: 100;
}
#slider-background:before {
background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#slider-background img {
display: block;
}
I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.
http://jsfiddle.net/teddyrised/XJFqc/
I want my Div id="b" to be on the other Div id="a", but instead I get the Div id="b" under Div id="a", What need I change in the Css?
Html:
<div class="picad30">
<div class="pic_sin30" id="a">
<img width="110" border="0" class="pic_sin30" src="SMALLAD.png"/>
</div>
<div class="picgar30 p" id="b"></div>
<div >
<div >upload</div>
<div ></div>
</div>
</div>
Css:
.picad30{
width:130px;
float:right;
display:table;
margin: 20px 0 0 0px;
position: relative;
}
.pic_sin30{
border: 1px solid #ccc;
height: 87px;
overflow: hidden;
width: 130px;
position: relative;
z-index:1;
}
.picgar30{
background-position:-5px -244px;
cursor:pointer;
height: 20px;
width: 20px;
float:left;
z-index:20;
position:absolute;
}
.p {
background-image: url("PIC/icon.png");
background-repeat: no-repeat;
}
Try this
.p {
background-image: url("PIC/icon.png");
background-repeat: no-repeat;
z-index:2;
position:absolute !important;
top:0;
left:0;
}
It can be helpful to you Read this
Edit
Working Fiddle
So I've made a few updates to your code and I hope I've interpreted your question correctly. Am I right by saying you want to stack .pic_gar30 or id=b on top of .pic_sin30 or id=a? And then on top of .pic_gar30 you want to add an icon?
If this is correct I've done the following, I've wrapped your 2 image divs in a parent div called pic-container which has the height you wish to use on your images and position relative so you can absolutely position your images inside without the upload text hiding in behind also.
You want to use the same css on both your image holders so I've given both of them the class img-holder and applied styles that position absolute, since .pic-gar30 comes after .pic_sin30 it will automatically be positioned on top. But if you like you can add a z-index to .pic_gar30. I've then used the ::after psuedo class selector http://css-tricks.com/pseudo-class-selectors/ on .pic_gar30 in order to position your icon above the image.
Please see my example which I hope helps http://jsfiddle.net/LXaCT/
I'm finally trying to do away with tables and use CSS.
I have 3 DIVs that make up a three layered layout: header, body and footer. I'm now trying to overlay a 900px wide DIV on top of these layers, center aligned, which will hold some of my content and navigational buttons.
These are the 3 layers:
And this (done in Photoshop), is what I am trying to achieve but transparent to the eye:
My 3 base layers are coded like this:
<div id="main" style="width:100%; z-index:1; position:relative;">
<div id="header" style="width:100%; height:175px; text-align:center; background:#151515; z-index:1;"></div>
<div id="contents" style="width:100%; height:400px; position:relative; background:#FFF; z-index:1;"></div>
<div id="footer" style="width:100%; height:200px; position:relative; background:#151515; z-index:1;"></div>
</div>
I did manage to get a new layer to sit on top but it wasn't center aligned. Could somebody please point me in the right direction?
Somehting like this could help:
JSFiddle: http://jsfiddle.net/DSH5J/
Add:
<div id="square"></div>
#square {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0 auto;
margin-top:50px;
width:80%;
height:100%;
background-color:#333;
z-index:10;
}
Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways.
margin-left:auto;
margin-right:auto;
Easiest way that I know of to centre a div of known width is to give it the following styles:
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
"Putting my money where my mouth is": http://jsfiddle.net/YVmBU/2/
HTML:
<div id="main">
<div id="header"></div>
<div id="contents-box">
<div id="contents">
<p>Some text</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
<p>etc</p>
</div>
</div>
<div id="footer"></div>
</div>
CSS:
#main {
}
#header {
position: relative;
height:100px;
background:#151515;
z-index: -1;
}
#contents-box {
border: dashed grey 1px; /* for understanding only, remove it in the end */
z-index: 1;
margin-top: -30px;
margin-bottom: -30px;
/* TODO: address min-height; try only one line of text. */
/* fixed height would work too, but would not let the box stretch dynamically */
}
#contents {
width: 75%;
height: 100%;
margin: 0 auto;
background: grey;
z-index: 1;
}
#footer {
position: relative;
height:75px;
background:#151515;
z-index: -1;
}
The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.
But if the two black bars merging when there is few content is not important, then ignore it.
Remove the grey dashed border and grey background; those are helpers - to know where each box is and understand what is happening.
By the way, the position: relative needs to be there on the z-index: -1; layers, otherwise the background does not go under. Read on position: this is because things in html have position: static by default, and z-index relies on position for its behaviour.
You can read about this in this page: http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
The only problem is with few text content: if min-height is used on #content, then the grey background does not stretch when there is few text; if a static height of N px is used, then the box does not stretch dinamically.
But if the two black bars merging when there is few content is not important, then ignore it.