I would like to know how to have a text partially overlaying an image.
Screenshot: → here. (I have circled with blue what I want!)
I have searched for this on Google, but the only result I received was Image Captions, which is not what I am looking for.
Any help will be greatly appreciated.
Just use position: relative in your text element and offset it by some value to the left.
Code:
h1 {
position: relative;
top: 50%;
right: 6%;
}
jsFiddle: → here.
Example:
#wrapper {
display: flex;
justify-content: center;
}
#parent {
width: 550px;
height: 343px;
background-image:
url(https://media-cdn.tripadvisor.com/media/photo-s/08/73/aa/76/trolltunga.jpg);
background-size: contain;
}
#child {
position: relative;
top: 50%;
right: 6%;
}
<div id="wrapper">
<div id="parent">
<h1 id="child">A Fantastic Title<br/>→</h1>
</div>
</div>
Related
Beginner in CSS here.
Basically, what I am trying to do is to place check marks or X-es on top of a country map and I am trying to find the best way to do this.(open to learn JS for this)
So far, I have placed my map in a div and centered it, with HTML code <img src="check mark"> after the map image.
I will do this for every check mark i have to add, but is it there any better solution ?
.container {
margin-left: 10%;
width: 75%;
height: 80%;
display: flex;
justify-content: center;
}
.child {
position: relative;
margin: 0 auto;
}
.check {
position: absolute;
top: 300px;
right: 500px;
}
<div class="container">
<div class="child">
<img src="Map_image.png">
</div>
</div>
This is an example of what i want to achieve:
https://imgur.com/a/mu5WpuN
Short answer is create a wrapper div with position: relative and place the map and the Xes inside it. Then make map fit with the wrapper (i.e. 100% width and height or whatever) then make all Xes position: absolute and position them accordingly using top: left: right: bottom: properties
Here's a working sample. Try to run it.
.wrapper {
position: relative;
width: 100%;
}
img.map {
width: 100%;
}
img.marker {
position: absolute;
width: 20px;
}
.marker.x1 {
top: 20px;
left: 50px;
}
.marker.x2 {
top: 50px;
left: 190px;
}
<div class="wrapper">
<img class="map" src="https://www.onlygfx.com/wp-content/uploads/2015/12/world-map-vector.png" alt="map">
<img class="marker x1" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
<img class="marker x2" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
</div>
I have been trying to come around this problem, but I can't find a way to make it work. Therefore I have come here for help.
My idea is that I want to place and size the button under the 99 / 99 text as seen on the image
Image of the html with the code
My html
<div class="btnAttackUpgrade">
<button class="btnUpgrade btnAttackSize" onclick="meleeupgPage();totalClick();"></button>
</div>
<div class="btnRangedUpgrade">
<button class="btnUpgrade btnRangedSize" onclick="btnTest2();totalClick();"></button>
</div>
<div class="btnSlayerUpgrade">
<button class="btnUpgrade btnSlayerSize" onclick="btnTest3();totalClick();"></button>
</div>
My CSS
.btnUpgrade {
position: absolute;
border: 0 none;
outline: none;
}
.btnAttackSize {
width: 31%;
height: 9%;
}
.btnRangedSize {
width: 31%;
height: 9%;
}
.btnSlayerSize {
width: 31%;
height: 9%;
}
div.btnSlayerUpgrade {
position: relative;
top: 67%;
left: 34.5%;
}
div.btnRangedUpgrade {
position: relative;
top: 34%;
left: 1%;
}
div.btnAttackUpgrade{
position: relative;
top: 0.5%;
left: 1%;
}
I know if I remove position: relative; completely from lets say btnSlayerUpgrade it sizes the button as I want, but then it will not stay under the text. It wont be effected by the width and heigth changes. See the picture After I removed position relative
What stop the button from resizing when it has a position to it in css
If understand your question correctly I think the easiest and most responsive way to do this is to put both elements as siblings in a container with display:flex and with centred children.
HTML
<div class="container">
<div class="btnAttackUpgrade"></div>
<button class="btnUpgrade btnAttackSize" onclick="meleeupgPage();totalClick();"></button>
<div>
CSS
.container{
display:flex;
//flex-direction: column; (default)
justify-content:center;
align-items:center;
}
.btnAttackUpgrade{
//unnecessary
}
.btnUpgrade .btnAttackSize{
//unnecessary
}
I'd like to place my H2 text vertically & horizontally center over my image.
Can someone explain how I do this?
https://jsfiddle.net/q3odxfmb/
<div class="content">
<img src="http://placehold.it/940x510">
<h2>
TEXT WILL GO HERE
</h2>
</div>
fiddlehttps://jsfiddle.net/q3odxfmb/1/
img {
max-width: 100%;
vertical-align: middle;
}
#container {
position: relative;
}
#text-outer {
height: 100%;
margin-left: 12.5%;
position: absolute;
top: 0;
width: 75%;
}
#text-inner {
color: #fff;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
this question already asked so many times please refer this link
thank you all
Text Above Image CSS Z-Index Not Working
It's quite easy. Simply set css to:
.h2 {
line-height:/*height of your image*/
}
Then set the margin in the div to auto:
div {
background-url: <image-link>;
margin:auto
}
This should center it perfectly.
You would have to have a small margin set for this method.
Here is a JSBin with an easy method, too:
https://jsbin.com/vawowebolu/edit?html,css,js,output
set the text as a background over a div, and center the text over the div.
HTML:
<div class="content">
<h2 id="mytext">
TEXT WILL GO HERE
</h2>
</div>
CSS:
div {
background: url("<image-link>")
}
#mytext {
line-height: 510px;
vertical-align:middle;
text-align: center;
}
I have this picture:
and I want this picture:
to be over the picture so I get this "dot-effect".
I also have to repeat the picture so it fits the other one. I managed to have them both in the same place but never to have the second one repeated over the first one.
Please help. I googled this for the past 2 days and couldn't figure it out.
You can use multiple background images
.avatar {
width: 180px;
height: 180px;
background-image: url(http://i.stack.imgur.com/G9pqm.png), url(http://i.stack.imgur.com/DSToa.png);
background-repeat: repeat, none;
}
<div class="avatar"></div>
or alternatively, an actual image in the HTML and a pseudo-element overlay.
.avatar {
width: 180px;
height: 180px;
position: relative;
}
.avatar::after {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(http://i.stack.imgur.com/G9pqm.png) repeat;
}
<div class="avatar">
<img src="http://i.stack.imgur.com/DSToa.png" alt="" />
</div>
Use first image as main background, than use position: absolute and background image on another element to place doted image over first one. Why background image for overlay? It's because you can set background-repeat attribute for background (default to repeat x and y).
.wrapper {
float: left;
position: relative;
}
.overlay {
background: url("http://i.stack.imgur.com/G9pqm.png") repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/DSToa.png" />
<div class="overlay"></div>
</div>
Working on a my example from this tutorial for making a unique CSS for my website, I found a trouble in the code :
HTML
<div class="items">
<div class="outerContainer">
<div class="innerContainer">
<div class="element">Finally over four lines, all the code is the same for each list</div>
</div>
</div>
</div>
CSS
.items .outerContainer
{
height: 180px;
width: 200px;
background-color: #EBEBEB;
position: relative;
}
.items .outerContainer .innerContainer
{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
background-color:red;
}
.items .outerContainer .innerContainer .element
{
position: relative;
top: -50%;
}
why top: -50%; of .items .outerContainer .innerContainer .element doesnt "move" the element to the top? If I write top: -20px for example works well, but I want %.
Why? And how can I fix it?
Strange, it works only on IE7 :)
Moving an element by percentage requires the containing element to have a height attribute. So if you put height:90px; (Which I gather is correct as the item is 180px high and the innercontainer should be 50% from the top) it should work.