I have this image:
But i want to place text in the middle like this:
How can I achieve this?
I would like to do this in html, so I would use a <div> or a <span>
Using Pseudo Elements
The above could be created using the ::before and ::after pseudoelements of the containing element. For instnace, suppose we started with this:
<h1>Keep Calm and Stack Overflow</h1>
We could target the two pseudo elements, set their dimensions and background images, and get the same effect you are seeking above.
h1::before, h1::after {
content: ""; display: block; height: 3em;
background: url('ribbon.png') center center;
}
The above is a mere example of what you may write. For a fuller demo, please see this fiddle.
Using a Background Image (Original 2010 Answer)
Create a div that is the dimensions of your image. Then place your text inside. Use margins/padding on your text to get it vertically-centered, and set text-align to "center" for its CSS.
.imgBox {
width: 300px; height: 100px;
background-image: url('bg.jpg');
}
.imgText {
text-align: center;
margin: 0; padding: 25px 0 0 0;
}
<div class="imgBox">
<p class="imgText">Hello World</p>
</div>
You can also use absolute positioning and z-index :
<img src="yourimagefile.jpg" class="background-image" />
<p class="overlay-text">Your Test</p>
And in the CSS file :
.background-image { z-index: -1; }
.overlay-text { position: absolute; top: ??px; left: ??px; }
Some nice references :
http://www.w3schools.com/Css/pr_pos_z-index.asp
To me, this looks like an <img>, then some text in a <span> for example, and then a second <img>. If you put them all into a container that has text-align: center everything should be fine.
Create a div of the same width and height as your image and set the image as the background for the div using css. Put vertical alignment middle and horizontal alignment center on the div and add the text to it.
Related
For a simple landing page I wanted to let some text box overlap an header image. To make it simple, I just have a structure like:
<header>
<img src="path/to/img.png" />
<h1>Awesome headline</h1>
</header>
All elements are set to display:block and the h1 is dragged inside the image with a negative margin. I also gave the headline some padding and background:white.
Now the problem: The headline text is shown on top of the image but the background colour is behind it! You can see an example here: https://jsfiddle.net/cv12evLn/
My guess is, that a browser renders all sibling blocks in layers, starting with all backgrounds and borders, then rendering images (img-tags) and finally text on top of everything else.
Is that right? And why the actual… I mean, that seems crazy unexpected to me.
To solve the issue, I've put the headline in a wrapper and set this to position:absolute. See here for a live example: https://jsfiddle.net/f5sd1u6o/
Use position:relative rather than negative margin. Then the z-index works automatically.
#container {
width: 500px;
height: 300px;
margin: auto;
}
#container img {
display: block;
width: 100%;
}
#container h1 {
display: block;
width: 50%;
height: 1em;
margin: auto;
padding: .5em 1em 1em;
font-size: 3rem;
background: yellow;
text-align: center;
border: 1px solid red;
position: relative;
top: -4.6rem;
}
<div id="container">
<img src="//placekitten.com/500/300">
<h1>
headline
</h1>
</div>
To get the Z-index to work, you need to apply position:relative anyway but you can still use negative margin if that is a design requirement.
JSfiddle demo (with negative margin)
Basically, backgrounds are rendered first before anything else (as I understand it) so they always come at the bottom of the stacking order. You just need to create a new stacking context and changing the position property does that.
As it happens so does changing the opacity of the element so a quick fix is to set opacity:.9999;
JSfiddle Demo (opacity 'hack')
So I have a div with content inside, but I'd like to cover that content completely with an image that is on top of everything else.
I'm using bootstrap if that helps
<div class="jumbotron">
<div> I have images and paragraphs inside of me </div>
<div> I have images and paragraphs inside of me </div>
<div class="clearfix"></div>
</div>
I tried setting a background image to the jumbotron, but that put the image behind everything else, instead of on top. I tried a few other things, but everything messed up the existing layout that should exist underneath the covering image.
You could position the image absolutely to cover the text.
.jumbotron{
position: relative;
}
.jumbotron img{
position: absolute;
}
You could also use a background image in this situation as well if your text is way too large. This is kind of goofy but the requirements here are kind of goofy:
.jumbotron {
position: relative;
height: 100%;
width: 100%;
}
.jumbotron img {
position: absolute;
}
.jumbotron .covering{
position: absolute;
height: 100%;
width: 100%;
background-image: url('http://lorempixel.com/400/200/');
background-size: cover;
}
You can just set the same CSS positioning and sizing rules to both the image and the text and make the z-index of the image higher than the text.
For whatever reason I am really beating myself up with this... No doubt because of the lack of support for a real "proper" way of vertically centering anything.
The Goal:
Is to have a set of four images, each inside their own responsive columns. Each image has a white overlay, that when hovered reveals more of the image, as well as a title for each of the 4 images that is horizontally and vertically centered inside the image.
I could easily achieve this if I set specific width/heights and stuck the image inside CSS rather than the HTML. For SEO reasons I want the image to be present in the HTML.
Additionally because of the responsive nature, the images must scale to 100% of the width of the column they reside in. Consequently, because the width scales, the height scales as well.
So the first issue is getting the "caption" as I am calling it in my classes, to appear over the top of the image. Easily done with a simple position: absolute; as well as top: 0; and left: 0; on the caption and position: relative; on the container.
The big problem and second issue, is vertically centering the "Gallery 1" text over the top of the image. I have to use the position: absolute; bit as I mentioned above just to get the text over-top of the image. From there I can't manage to get a display: table; solution to work, nor a -50% margin solution to work.
Here is a JS Fiddle
My HTML:
<div class="container">
<img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" />
<div class="caption">
Gallery 1
</div>
</div>
Any ideas on how to achieve this? I would like to stay at least IE8 supported, and I am using selectivizr already, so pseudo-classes don't bother me.
First, I wasn't sure about what you mean exactly. But as you mentioned:
The issue is centering the text Gallery 1 vertically over the top of the image. Centering it horizontally is easy with a simple text-align but centering it vertically is what is eluding me.
Here is my attempt to align the text vertically over the image. Actually the concept comes from this approach of a similar topic on SO:
.container { position: relative; }
.container img {
vertical-align: bottom; /* Remove the gap at the bottom of inline image */
max-width: 100%;
}
.caption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font: 0/0 a; /* Remove the gap between inline(-block) elements */
}
.caption:before {
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.caption a {
font: 16px/1 Arial, sans-serif; /* Reset the font property */
display: inline-block;
vertical-align: middle;
text-align:center;
background: rgba(255, 255, 255, 0.75);
width: 100%;
padding: 1% 0; /* Added a relative padding for the demo */
}
WORKING DEMO.
This relies on CSS2.1 and it will definitely work on IE8+ (excluding rgba()).
If I understand your issue correctly, this may work for you:
Working Demo
If you need the image to scale when hovered over, then simply adding a :hover on the container and changing it's width should work.
CSS:
.container {
// existing styles
-webkit-transition: all .2s; // needs prefixes for other browsers.
}
.container:hover {
width: 500px;
}
The only issue is that transition has no support for IE9 or earlier. So you'd need to go a JS route if that is an issue.
Back to basics, I have a situation whereby I have an image which needs to appear over the background of an element just below it. However, I do not want the image to be over the top of the content of that element, only the element (and background properties) itself:
http://jsfiddle.net/chricholson/4twr5/1/
HTML:
<img src="https://www.google.com/images/srpr/logo3w.png" />
<div>
Hello World
</div>
CSS:
img { position: absolute; z-index: 20; }
div { position: relative; top: 45px; z-index: 10; padding: 30px; background: red; }
a { position: relative; z-index: 30; padding: 10px; background: yellow; display: block; }
Expected behaviour would be the image to appear over the top of the div background [check], but then appear behind the yellow link, which it isn't.
Found my "answer" (more confirming my doubts) here Can't get z-index to work for div inside of another div. The key sentence being "Once you set position:relative on test_1 you are causing its z-index to be in a different world than the z-index of test_2."
It seems the reason I have a problem is because once I have set the image higher than the div, no matter what z-index value I set to the contents of the div it will always be covered. I didn't think z-indexes worked like this, I thought everything was "separate" and so long as a value was higher than a value elsewhere (regardless of parent containers) things would be fine.
img { position: absolute; z-index: 15; }
div { position: relative; top: 45px; z-index: 20; padding: 30px; background: red; }
a {z-index: 30; padding: 10px; background: yellow; display: block; }
You can try this code. By the way a is a child of div. You don't need to type position: relative; Because you wrote for div.
Put the image inside the div like so:
<div>
<img src="https://www.google.com/images/srpr/logo3w.png" />
Hello World
</div>
Most of the answers here are pointing out the base truth: in straight up HTML + CSS, this is probably only possible if the <img> is inside of the <div> and a sibling to <a>.
Since you've indicated that you can't change the HTML, you could instead apply a simple JavaScript that would reorder the DOM as necessary for you: $('div').prepend($('img'));. (This is JQuery, by the way.) What this does is it takes the <img> and sticks it as the first child in <div>.
Of course, if you were to use this in production code, you'd want to append id's to the elements and select off that otherwise you'd have images being stuck into divs willy nilly.
Here is a JSFiddle demo. The JQuery is called onDomReady(). The HTML itself is unchanged.
http://jsfiddle.net/4twr5/21/ Look this jsfiddle
Update according to comment http://jsfiddle.net/4twr5/22/
I have been struggling with something which in theory should be very simple for a few days now... and i am determined not to give up.
I am trying to achieve this:
Essentially horizontal rule, with an ornament between - the HR will span the full width of the screen.
So i sliced my PSD to drop out the ornament as a image - and i am trying to overlay this onto a centered but failing miserably.
My Markup:
<div>
<hr>
<img src='assets/img/ornament.png' class='center'>
</div>
CSS:
hr{
height: 2px;
color: #578daf;
background-color: #578daf;
border:0;
}
I just cant figure out how to make the image appear in the centre of the HR.... Any help or pointers would be appreciated.
You can also accomplish this with a CSS pseudo element. All that's needed for HTML is the <hr>
hr:after {
background: url('yourimagehere.png') no-repeat top center;
content: "";
display: block;
height: 30px; /* height of the ornament */
position: relative;
top: -15px; /* half the height of the ornament */
}
Change the markup tp
<div class='hr'>
<hr>
<img src='assets/img/ornament.png' alt=''>
</div>
Add the following to the stylesheet, replacing 16px by a suitable value that depends on the height of the image and the expected font size.
.hr { text-align: center; }
.hr img { position: relative; top: -16px; }
However, a better approach is to use just an image, centered inside a div element that has a suitable background image that repeats horizontally. The background image would be a piece that is of the same color as the overall page background but has a horizontal line in the middle.
Check out this fiddle. You can set the ornament image as a background on the div with the ornament class.
off the cuff...
using the center image for the hr and a repeated line segment for the div...
<style>
.line hr {height: 16px; background: url(as_image.jpg) center center no-repeat;border:0;}
.line {background: url(as_line.jpg) center repeat-x;}
</style>
<div class="line"><hr></div>