I figured out how to fix the icons to the bottom of the page but now for some reason only one will show. I've tried to put them each in their own div but still not working?
HTML:
<div style="position: relative">
<img src ="./images/tw.jpg">
<img src ="./images/ig.jpg">
<img src ="./images/fb.jpg">
</div>
CSS:
img {
height: 40px;
width: 40px;
position: fixed;
bottom: 0;
text-align: center;
}
<div class="container">
<img src ="./images/tw.jpg">
<img src ="./images/ig.jpg">
<img src ="./images/fb.jpg">
</div>
<style>
.container {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
.container img {
height: 40px;
width: 40px;
}
</style>
add position:fixed in div
div {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
remove 'position:fixed' from css or replace it with 'position:relative'
Related
So I've looked at some similar problem, but I still don't get it. Please take a look on my HTML and CSS sheet:
CSS:
.bottom1Container {
vertical-align: middle;
position: relative;
text-align: right;
}
.bottom1 {
position: absolute;
right: 0;
top: 63%;
width: 100%;
object-fit: scale-down;
}
HTML:
<div class="bottom1Container">
<div class="bottom1" style="background:url(/images/bottom1.svg) no-repeat ;"></div>
So, as you can see there's already position: relative in the parent. But why is this still not working? (btw the bottom1.svg file is an animation svg)
When you make it non 100% wide, it will work
.bottom1Container {
vertical-align: middle;
position: relative;
text-align: right;
}
.bottom1 {
position: absolute;
right: 0;
object-fit: scale-down;
}
div {
height: 200px;
}
<div class="bottom1Container" style="background-color: gray">
<div class="bottom1" style="background-color: blue; width: 50%">
<p>Your div with background image</p>
</div>
</div>
I'm trying to make a white div on top of a img.
I have tried with position absolute and relative but don't make it. I'm stuck.
The box is showing under the img container.
What am I doing wrong? :)
.img_container {
margin-left: 40px;
margin-right: 40px;
background-size: cover;
background-position: center center;
position: relative;
text-align: center;
}
.img_container .the_img img {
width: 100%;
height: 420px;
}
.img_container .the_img .container_white{
width: 900px;
height: 50px;
margin: 0 auto;
background: white;
position:absolute;
}
<div class="img_container">
<div class="the_img">
<?php echo get_the_post_thumbnail( get_the_ID(), 'large'); ?>
<div class="container_white">ยจ
</div>
</div>
</div>
<div class="fixfloat"></div>
The only thing the get_the_post_thumbnail does is inserting an image-element into your code.
For example, it will generate something like this:
<img width="" height="" src="" class="" alt="" large="" srcset="" sizes="">
Of course filled with your custom values.
For better demonstration purposes I replaced the php function call by the returned img tag.
If you want to place your div relative to its parent:
Your parent should be position: relative
Your children should be postion: absolute
In your case the the_img element is the parent.
Both children, the img and the container_white have to be absolute to remove them from the normal document flow. See the code snipped.
.img_container {
margin-left: 40px;
margin-right: 40px;
background-size: cover;
background-position: center center;
position: relative;
/**text-align: center;**/
}
.img_container .the_img img {
width: 100%;
height: 420px;
position: absolute;
}
.img_container .the_img .container_white{
width: 900px;
height: 50px;
margin: 0 auto;
background: white;
position:absolute;
}
.the_img{
position: relative;
}
<div class="img_container">
<div class="the_img">
<img src="https://images.pexels.com/photos/386148/pexels-photo-386148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="beach">
<div class="container_white"></div>
</div>
</div>
<div class="fixfloat"></div>
So the only thing you have to do is to
make the_img to relative
make img to absolute
NOTE: I removed the text-align: center from the img_container just for better displaying.
I've tried everything, but nothing works! transform: translate (50%); seems to work, but it doesn't align it to the exact center. I even tried left: 50%; with it.
I've spent a week figuring it out, and I still can't.
The image I'm trying to align is a logo with the dimensions 660 X 150.
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
<style>
.logo {
position: fixed;
width: 35%;
top: -5px;
height: auto;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
EDIT: No, I want to align the logo to the center of the page. The rectangle div is the background color for the logo.
Also, none of those answers worked. :(
Try this:-
Use display: flex; justify-content: center; element to align img at center.
<div id="rectangle" style="display: flex; justify-content: center;">
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
position: relative;
width: 35%;
top: -5px;
height: auto;
text-align:center;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
Instead of using an <img> tag, try using a div and give that image as backgorund with
background-position: center;
background-image=url('image.png');
backgorund-repeat:no-repeat;
background-size:contain;
use this
<div id="rectangle"><img class="logo" src="Untitled.png"></div>
and for style
<style>
.logo {
margin-right:auto;
margin-left:auto;
}
#rectangle {
width: 100%;
height:100px;
vertical-align:center;
}
</style>
try it
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
width: 35%;
height: 150px;
}
#rectangle {
width: 100%;
height: 150px;
background: #101010;
text-align: center;
}
</style>
Are you looking for something like this ?
And yes, avoid using center tag as its deprecated in HTML5.
.center-my-content {
height: 500px;
width: 500px;
position: relative;
border: 1px solid #000;
margin: 0 auto;
}
.logo{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div id="rectangle" class="center-my-content">
<img class="logo" src="http://www.harpseals.org/images/seals/whitecoat_on_back-photo-eric_baccega_npl-sm.jpg">
</div>
Remove the position: fixed; from the img.
.logo {
height: auto;
width: 35%;
display: block;
margin: 0 auto;
top: -5px;
}
#rectangle {
position: fixed;
width: 100%;
height: 100px;
background: #101010;
top: 0;
}
<div id="rectangle">
<img class="logo" src="image.png"></div>
https://codepen.io/Krimlen/pen/zwBmjV
how to make the two images' height equal to the window and the width to automatically adjust wth height? I've really searched a lot and I can't find the answer.
<body>
<div id="container">
<img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" class="home" alt="Makeup Artists"
class="home"/><img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" alt="Photographers" class="home"/>
</div>
<img src="images/logo.png" alt="Satch" id="logo"/>
</body>
<style>
html, body{
margin: 0;
padding: 0;
}
#container{
text-align: center;
}
</style>
Remove src=".." from <img> and apply it in css
img.home {
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg');
background-size: 100% 100%;
position: absolute;
}
You can use viewport height but you will also need to display it as flex. See the example below
img {
height: 100vh;
display: flex;
flex-direction: row;
}
That should work, you may also want to add z-index to your container so the image is behind it. Like this.
#container {
text-align: center;
position: relative;
z-index: 100;
}
img {
height: 100vh;
display: flex;
flex-direction: row;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
Please try the following:
html, body {
height: 100%;
}
.img_wrap {
height: 100%;
text-align: center;
}
.img_wrap img {
width: auto;
height: auto;
max-height: 100%;
}
<div class="img_wrap">
<img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" class="home" alt="Makeup Artists"
class="home"/><img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" alt="Photographers" class="home"/>
</div>
<div id="container"><img src="https://s-media-cache-ak0.pinimg.com/originals/36/ef/af/36efafe91fddde518cba85e974c7e8c8.jpg" alt="Photographers" class="home"/>
</div>
<img src="images/logo.png" alt="Satch" id="logo"/>
The only way i know how it works is
img { height:100% }
or
img { height:100%; width:auto; }
let me know if this helped.
Have created a full screen image, that is filling the full site when you enter my website. But I can't make text over the image so that I can have a read more button and a welcome to name.
This is my code:
<div class="row">
<div class="col-md-12-">
<img class="img-responsive" style="min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; " src="~/Content/img/maxresdefault%20(1).jpg" />
</div>
</div>
Any suggestions on how I add text over an image?
It needs to look like this:
There are a few ways:
div with text inside and style="background: url('my_img.png');".
a div with 'position: absolute; z-index: -1;' behind it that contains the img or background img.
Just add position property value of absolute, and a positive z-index property value to the text container only. See the example below and adjust as needed.
.row {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.col-md-12 {
width: 100%;
height: 100%;
}
.col-md-12 img {
width: 100%;
height: auto;
}
.text {
position: absolute; /* Make stack-ability possible */
z-index: 3;
top: 100px;
left: 50px;
color: white;
font-size: 36px;
font-weight: bold;
background: black;
opacity: 0.70;
padding: 10px;
;
<div class="row">
<div class="col-md-12">
<img src="http://i.stack.imgur.com/xvCoo.jpg">
</div>
<div class="text"> Whatever your text is goes here </div>
<div>
There are a couple of ways to do it, the second option IMO is the simplest.
Positioned absolute
Offset from top with margin and center aligned button/content
http://codepen.io/anon/pen/jbBVeB
body{
background: url(http://placehold.it/1600x900);
}
.welcome{
margin-top: 50px;
text-align: center;
}
with the background-image method your CSS code would be:
body{
background-image: url('~/Content/img/maxresdefault%20(1).jpg');
background-position: center;
background-attachment: fixed;
}
put that on CSS and you're done!