I was looking for a solution where I have text on top of an image.
I found solutions similar to this:
<div>
<div class="centered" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
No Events found
</div>
<img src="https://www.steelmint.com/nw/public/images/events-01.svg" alt="Snow" style="width:100%;
position:relative; text-align: center; opacity:0.4;">
</div>
Now I realized due to the position-style my text will be displaced if I for example
Zoom in/out
Change Window Height/Width
Switch to Smartphone-View
How is this usually solved so my text stays over my image?
My idea was to just create an image where the text is part of the image and then bind that image to my <img>- Tag. Is this a common way to do?
Simply use the class on the wrapping div and give it a position: relative; like in the sample below. Then let the div with the text span the entire parent div by using position: absolute; in combination with top, bottom, left and right: 0;.
For adding a opacity effect, use rgba as background color instead. It will not cause the same issues as opacity which is rendered last. Use a positive z-index to span the text above the image layer wise.
.text-image-wrapper {
width: 100%;
position: relative;
object-fit: contain;
}
.text-image-wrapper div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background-color: rgba(255, 255, 255, 0.5);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.text-image-wrapper img {
width: 100%;
}
<div class="text-image-wrapper">
<div>Some Exampel Text</div>
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
</div>
Add z-index: 20; to the .centered div. Like this:
<div>
<div class="centered" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index: 20;">
No Events found
</div>
<img src="https://www.steelmint.com/nw/public/images/events-01.svg" alt="Snow" style="width:100%;
position:relative; text-align: center; opacity:0.4;">
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/MWjqpwb
Related
Empty div like this :
<div class="section" id="s"> </div>
will be at the size of the screen.
But if I put another empty div inside, this section div height will be 0, or it will be in the height of the child's content.
<div class="section" id="s">
<div class="Back"> </div>
</div>
will make this section height to be 0, unless I put something inside Back which will make the section height= openBack's content.
I need to set the section size to be the screen size no matter what happens inside it, and I couldn't.
CSS :
html {
height: 100%;
}
body {
min-height: 100vh;
}
.section {
height: 100%;
width: 100%;
}
.Back {
background-image:url("/images/bg.png");
width: 100%;
height: 100%;
background-size: cover;
justify-content: center;
align-items: center;
}
How can you set the section size to stay screen size constant ?
NOTE: I was answering the original question
You might want to try this:
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
would be able to cover parent div.
Check the following fiddle or snippet:
.hidden{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid black;
display: block;
background-color: rgba(254,204,254,0.5);
align-items: center;
flex-direction: column;
}
div.openBack {
position:relative;
border:1px dashed red;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div.openBack img {
flex-shrink:0;
min-width:100%;
min-height:100%
}
<div class=openBack style="width:100px; height:200px">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Mona_Lisa_headcrop.jpg/36px-Mona_Lisa_headcrop.jpg">
<div class="hidden"></div>
</div>
Try below css -
.openBack{ position:relative;}
.hidden{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:9999;
}
To use an image as a background to a section or div, you don't want to include that image as an element. It's pushing the other elements around it out of the way, this is why the next div is pushed below it. And it would be more complicated than necessary to try to get that to behave well by using absolute position.
I would suggest attaching the image as the background-image to either your section's class or id, and remove the <img> element from the html.
either:
.openBack {
background-image: url("/folder/file.png");
}
or
#one {
background-image: url("folder/file.png");
}
You'll want to look up the properties of CSS' background-image to get it to scale and fit the exact way you want.
And you can't use number values at the beginning of IDs.
Hope this helps!
Thanks for all the answers, I found out that the solution was pretty simple (stupid).
The inner div closing tag was wrong <div> instead of </div> which messed up the structure.
Wish I had a tool to find such a mistake.
I know this may seem like a newby question, but is it possible to set an image element as a parent? If so, how can I do so?
Heres an example of what I'm looking for:
Also, the reason I can't just have the div element as the parent is that I want that text element relative to that image element, not the div element. This way I can center the text relative to the image. Thanks in advance for any help!
Looks like I've figured it out. I started messing with some values and I got it.
HTML:
<div id="main-div">
<img id="image" src="url.com/image.png">
<h1 id="text">Caption</h1>
</div>
CSS:
#main-div {
position: absolute;
top: 30px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
}
#image {
position: absolute;
top: 130px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
color: white;
font-family: "Roboto";
text-align: center;
}
#text {
position: absolute;
top: 30px;
left: 15%;
margin: 0px auto;
transform: translate(-50%, 0);
display: block;
border: thin red solid;
}
Here's a JS Fiddle of the code and final result: https://jsfiddle.net/k3b70Lg7/
No you cannot because image elements are replaced.
You can however wrap the image and the text element in another div and position that.
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="..">
<div class="text"></div>
</div>
</div>
Now setting the wrapper to be inline-text means that it will expand according to contents (the image) and by setting it also to be position:relative you can position the text (position:absolute) wherever you want inside it.
Full example
.outer-black {
background: black;
padding: 2em;
}
.inner-image-text-wrapper{
position:relative;
display:inline-block;
}
.inner-image-text-wrapper img{display:block;}
.inner-image-text-wrapper .text{
position:absolute;
top:105%;
left:5%;
right:5%;
text-align:center;
background:rgba(255,255,255,0.5);
}
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="http://lorempicsum.com/simpsons/300/200/1">
<div class="text">image caption</div>
</div>
</div>
I'm making a div that I want to say "Banner" with a larger "BANNER" in grey behind it. Kind of like a water-mark. But the positioning is wrong and the browser is rendering the 'water-mark' on top of the banner text.
.banner {
position: absolute;
height: 10%;
width: 100%;
background-color: black;
color: red;
vertical-align: top;
overflow: hidden;
z-index: -1;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.foreground {
width: 100%;
height: 100%;
font-size: 2em;
margin: 0;
padding: 0;
top: 0;
text-align: center;
z-index: 2;
}
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
text-align: center;
vertical-align: center;
color: lightgrey;
font-size: 7em;
z-index: 1;
}
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
</div>
</div>
For reasons I don't want to go into here, banner needs to keep it's position: absolute (Sorry if that's too restrictive)
Otherwise we're free to play around with it. I would like the water mark to be slightly overflowing from the top and bottom of the banner div or at least flush with the top.
But most importantly I need the water-mark behind the foreground divs content.
Thank for any help! I prefer a CSS solution but JS would be appreciated too. PS here's a jsfiddle if you prefer that.
EDIT I fixed the height issue by putting margin-top:-5% which I tried before, but with a percentage WAY too high. Apparently it goes of the height of the page not it's parent. Perhaps because it's position:absolute. Thanks for your help!
If you want it to appear in a different order, change the order of your html. You can then also get rid of the z-indexes. So:
<div class="banner">
<div class="wrapper">
<div style="position:absolute; width:100%">
<p class="background">BANNER!</p>
</div>
<div style="position:absolute; width:100%">
<p class="foreground">Banner!</p>
</div>
</div>
Alternatively / additionally:
If you need it to be a watermark, why not add some opacity of like 0.3 to .background? That does not actually put it behind the text, but makes it appear like a watermark.
Working in this fiddle: https://jsfiddle.net/0srj5hus/1/
I have an image inside a div. I want two links to float over the image, one on top-left and other top-right of the image. I did this:
<div class="container">
<div style="float:left">like</div>
<div style="float:right">share</div>
<img src="images/activity-image.jpg" />
</div>
Floating divs push the image down. But, I want them to appear upon the image. It should look as if the like and share links are on the top-left and top-right corners of the image and not above the image. Hope I got the explanation clear.
Please help. Thanks.
Use absolute position within a relative positioned element and use top, bottom, right and left properties to position the text.
Try this:
.top{
top: 0;
}
.left{
left: 0;
}
.right{
right: 0;
}
.img{
position: relative;
width: 200px;
height: 200px;
background: url("https://www.google.com/images/srpr/logo11w.png") no-repeat;
}
.img span{
position: absolute;
color: #000;
}
<div class="img">
<span class="top left">text</span>
<span class="top right">text</span>
</div>
JSFiddle Demo
.container {
position: relative;
width: 300px;
}
img {
width: 300px;
height: 300px;
}
.top_right {
position: absolute;
right: 0px;
top: 8px;
}
.top_left {
position: absolute;
top: 8px;
left: 8px;
}
<div class="container">
<div class = "top_right">like</div>
<div class= "top_left">share</div>
<img src="http://thevisualcommunicationguy.com/wp-content/uploads/2013/11/Starbucks-Logo-051711.gif" />
</div>
PS - This is with regard to your code. There could be other techniques as well.
JS Bin demo
Take a look at this, but adjust the CSS positioning of the h2 element equivalent to suit your needs: css-tricks.com/text-blocks-over-image
Have you set CSS positioning? Setting the image position: fixed may hold the image in place while you float the divs.
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/