I am trying to put a button on a picture. I have tried doing z-index and all but it does not seem to work.
<div class="landing-img">
<img src="CartoonPalace.png" class="img-fluid" style="position:relative; z-index: -1;" alt="">
Start Exploring
</div>
You need to specify the position of your absolute positioned element, for example, you could specify left: 0px. Note that I have changed the image url in order to make a functional demo, you should change it in your own code.
<div class="landing-img" style="position:relative;">
<img src="https://picsum.photos/200/300" class="img-fluid" alt="">
Start Exploring
</div>
Start Exploringg
You could do this very easily by setting the image as the background of the parent div and then centering the button.
<div class="landing-img">
Start Exploring
</div>
// css
.landing-img{
background-image: url(CartoonPalace.png)
display:flex;
justify-content: center;
align-items: center;
}
Related
I use bootstrap and I have an img in a div, the img is top aligned, I couldn't make in stick to the bottom of the div.
<div class="col-lg-6 col-md-6" style="height: 100%">
<img src="images/tv/Smartphone_Hand.png" class="img-responsive" style="vertical-align: bottom; position: absolute;">
</div>
<div class="col-lg-6 col-md-6" style="height: 100%">
<img src="images/tv/Smartphone_Hand.png" class="img-responsive" style="position:absolute;bottom:0">
</div>
Use his
I see you're trying to use vertical-align:bottom. From MDN:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.
Because your display is likely the initial (block), it won't work. You could position it as absolute, which you have done, and put it at the bottom:
img {
position:absolute;
bottom:0;
}
<img src="https://s-media-cache-ak0.pinimg.com/236x/d1/f9/eb/d1f9eb025650eb3ff13a26697ed9994a.jpg" alt="test" />
Also, you should avoid using inline styling as much as possible. It makes styling far more complicated as a project unfolds.
I'm trying to line up three pictures within a bootstrap grid. All of the images were centered, which is what I'm trying to, before I added a img-responsive class to one of the images. I do however want the images to be responsive while also making them a tiny bit larger than they are already. Tried numerous things such as "width: 200%;" however without success
How it looks
I created a "center-all" class within my css that should center all the three of them, and it did work, just until I added the img-responsive class to the red one. The class was not added to any of the other images.
.center-all {
text-align: center;
align-items: center;
align-content: center
vertical-align: center;
}
JSFiddle
https://jsfiddle.net/8a6ee7f5/
Images doesn't work in Fiddle ofc.
What I want to achieve:
I want the images to be 2 times larger than what they currently are and I want them to be responsive while still keeping them centered.
Thanks in advance!
I found the answer to my question(s).
When adding the img-responsive class to the image it moves to the left. By adding "center-block" to the class to the image it should stay in the center.
<img src="..." class="img-responsive center-block">
Now I just need to find the answer on how to upscale my pictures to 200%.
EDIT:
I found the following to upscale my images:
CSS
.wrapper {
width: 40%;
}
and added that to my image class.
HTML
<img src="..." class="img-responsive center-block wrapper">
And that fixed it.
So bootstrap already has an element centering class called .text-center you can just add this class to the row wrapping your items and everything in that row will be centered. Then instead of using .img-responsive you can add a width to the image instead or give the image a percentage width. It will maybe look something like the following hopefully this is what you are looking for:
Here is a fiddle Updated Fiddle
note: I have added a border-radius of 50% to your images because I assume you want them to be round. If you want to use 100px you can change it back.
Css:
#values img{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
width: 80%;
}
#val1 {
background-color: #792c24;
}
#val2 {
background-color: #4f5e6d;
}
#val3 {
background-color: #665e25;
}
Html:
<div class="container" id="values">
<h3 class="fancy">Values</h3>
<div class="row text-center">
<div class="col-sm-4">
<h4>Independent</h4>
<img id="val1" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Team Player</h4>
<img id="val2" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Dedicate</h4>
<img id="val3" src="http://placehold.it/300x300">
</div>
</div>
</div>
I have this site:
link
I put a picture more clearly understand what they want to do.
CODE HTML:
<div class="col-md-12 text-center">
<img src="wp-content/uploads/2015/10/scroll.png">
</div>
There is positioned in that position ... and I did these things with bootstrap, somehow you know how to fix this problem?
This picture must always be there regardless of resolution
Thanks in advance!
Try the following.
Add position relative to the container
.about-content-top{
position:relative;
}
Add position absolute to the images and set bottom to 0
<div style="position: absolute; bottom: 0px;" class="col-md-12 text-center">
<img src="wp-content/uploads/2015/10/scroll.png">
</div>
I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.
I am working in javascript. I am facing an issue i.e. I want to place an image on another image. MY Code is follows:
<div>
<img src="1.jpg" style="z-index:1;"/>
<img src="2.png" style="z-index:2; left:-100px;"/>
</div>
The problem is when i run the code it places image on the right bottom corner of the DIV but not on the image.
Any help would be appreciated.
Working DEMO
Use position: absolute in CSS:
img { position:absolute; }
<div>
<img src="1.jpg"/>
<img src="2.png"/>
</div>
Note: You don't need to specify z-index if you want last image to appear on top. This is default browser behaviour.
<div>
<img src="1.jpg" />
<img src="2.png" style=" left:-100px; position:relative"/>
</div>
try:
<div style="position:relative">
<img src="1.jpg" style="z-index:1;"/>
<img src="2.png" style="z-index:2; position:absolute;top:0;left:0;"/>
</div>
You need to add the position property to the image style, e.g. ->
position:relative
https://developer.mozilla.org/en-US/docs/CSS/position
Also, this isn't javascript, it's CSS