I want to make two images part of a background div, one at the top and the other at the bottom but the bottom image keeps extending my div height and width.
This image is what I am trying to recreate:
I have both background patterns saved and I want to position one at the top left and the other at the bottom right without altering my div's width or height
I've tried using positions and even margins but it keeps extending my div
.body {
position: absolute;
margin-top: 0;
background-color: #1799A7;
width: 100%;
height: 720px;
}
.bg-top {
position: absolute;
margin-top: -400px;
margin-left: -400px;
}
.bg-bottom {
position: absolute;
margin-top: 400px;
margin-left: 600px;
}
<div class="body">
<div class="bg-top">
<img src="images/bg-pattern-top.svg" alt="">
</div>
<div class="bg-bottom">
<img src="images/bg-pattern-bottom.svg" alt="">
</div>
</div>
Check this: https://codepen.io/marceloag/details/DbqYwy
An almost identical template is solved in this codepen.
This example also includes JavaScript, which you can omit:
$(document).ready(
function iniciar(){
$('.follow').on("click", function(){
$('.follow').css('background-color','#34CF7A');
$('.follow').html('<div class="icon-ok"></div> Following');
});
}
);
Related
So I made a website which is working fine (http://hltvnewsgenerator.com/previewavatar/) however when I change the resolution of the window myself, It moves image to some undesired position.
I want to know how can I bind image to a specific position even when the window is getting resized.
My code:
HTML:
<img :src="image" id="steamprofile">
CSS:
#steamprofile {
width: 166px;
height: 166px;
position: absolute;
z-index: 1;
left: 487px;
top: 463px;
}
Problem is that you use position: absolute and then specify exactly where the bananas are supposed to be position. This will of course break the design for all other resolutions than the one you are testing for.
You could wrap the images inside a div (or any other element), this way the absolute positioning will be relative to that div (the div that is wrapping the img). What I would do is to put the background image as a background image for a wrapping div, then put the banana image inside that div and keep the absolute positoning:
div {
background-image: url(https://i.ibb.co/2Kjvf6f/steam-Profile.png);
width: 977px;
height: 226px;
}
div > img {
position: absolute;
left: 487px;
width: 166px;
height: 166px;
}
<div>
<img src="https://bananagaming.tv/images/bananagaming_logo.png">
<div>
Here is my solution, paste this into you HTML, you gotta put css externally by yourselt.
<div style="position: relative">
<img src="steamProfile.png" alt="img">
<img src="https://bananagaming.tv/images/bananagaming_logo.png" id="steamprofile" style=" left: 110px; top: 23px; "></div>
I have an image inside of a div to put a button on the image. I've searched around the web but can't find any way to center the image.
I've tried making it it's own class and centering the img tag itself, but none of them seem to work.
<div class="container">
<img src="https://cdn.discordapp.com/avatars/543553627600584735/470015f633d8ae88462c3cf9fa7fd01f.png?size=256" alt="utili">
Utili
</div>
The image should be centered in the middle of the page, so I can line up 3.
In HTML:
<img src="paris.jpg" alt="Paris" class="center">
To center an image, set left and right margin to auto and make it into a block element:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
So, you can center any image while its inside a div. I hope this might help you.
You could position the .btn absolute to the relative container. If you know the size you want your image, even better.
How I would attempt to achieve it:
.container {
position: relative;
height: (the height of your image);
width: (the width of your image);
}
img {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
position: absolute;
bottom: (however far you want it from the bottom in pxs - so lets say 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
I'm a beginner in HTML coding and I'm trying to display just a part of an image. I'm displaying the image this way:
<img id="theImg" style="width:100%;" src="https://'myimage.jpg'" />
but I really don't know how to display just bottom left quarter of the image. It is even possible without making a new picture with the cropped image?
If you know the size of your image, you can put it into a container which has half the width and height of the image and use position: absolute; and the settings shown below:
.container {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
bottom: 0;
left: 0;
}
<div class="container">
<img src="http://placehold.it/600x400/fa0" />
</div>
You can just use a div element that has a background image and then just apply a few css changes to that div like so:
#theImg {
height: 200px;
width: 200px;
display: block;
background-image: url('https://myimage.jpg');
background-position: bottom left;
}
JsFiddle: https://jsfiddle.net/kekwdy2L/3/
Use background-image with background-position:
#my-image {
background-image: url('https://i0.wp.com/lovecuteanimals.objects.cdn.dream.io/wp-content/uploads/2016/01/Cute-Netherland-Dwarf-Rabbit.jpg?w=1160');
background-position: -220px -80px;
display: inline-block;
width: 200px;
height: 200px;
}
<div id="my-image"></div>
<style>
div {
height: height you want;
width: width you want;
background-image:url("image you want");
</style>
<div class="div"></div>
If you know the size of the image in pixels, you can use a css clip.
Note, clip is officially deprecated in css specification, however its replacement clip-path currently has very low browser support.
Another way of achieving crop is placing the <img> tag within a <div> as shown in this answer.
I have an image I want to have come out of the website from the left and right side. See the image for what I have so far.
I managed to get it to work by giving the div the image on the left is in a position absolute and a left of -30px, but when I do the opposite for the image on the right (aka position:absolute and right:-30px), the image doesn't get cut off like it does on the right side.
Instead, the page get wider to have space for the image on the right. I have no idea as to how to get this to work and I also don't really know how to word this issue and my searches have come up barely anything to do with what I'm trying to find.
Below the HTML for both sides:
<div class="imgdecalleft">
<img src="images/img/patroon.svg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="images/img/patroon.svg" alt="patroon">
</div>
And the subsequent CSS:
.imgdecalleft {
width: 15%;
position: absolute;
left: -30px;
}
.imgdecalright {
width: 15%;
position: absolute;
right: -30px;
}
Add this:
body {
overflow-x: hidden;
}
Here is an alternate approach that relies on setting the image width to the width of the container div and then offsetting the image inside the container. Using overflow in this case only effects these divs and their images.
This should still allow the page to be scrollable horizontally on narrow screens.
.imgdecalleft {
width: 30%;
position: absolute;
left: 0px;
overflow: hidden;
}
.imgdecalleft img {
width: 100%;
position: relative;
left: -50%;
}
.imgdecalright {
width: 30%;
position: absolute;
right: 0px;
overflow: hidden;
}
.imgdecalright img {
width: 100%;
position: relative;
left: 50%;
}
<div class="imgdecalleft">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
I want to be able to resize the window while my divs keep their position on the page AND resize to a % of width and height I declare.
HTML:
<body>
<div class="view">
<div class="Tree">
<img id="tree" src="img/tree.png">
</div>
<div class="Ground">
<div class="g"></div>
</div>
</div>
</body>
CSS:
.Tree {
position: absolute;
}
.Tree #tree {
position: relative;
height: 75%;
width: 75%;
left: 30%; }
.Ground {
z-index: 2;
width: 100%;
height: 100%; }
.Ground .g {
background-color: green;
opacity: .5;
position: relative;
height: 50%;
width: 100%; }
The tree stays pretty constant, but when the window is the largest it can be on my macbook, it slides over to the left a little. The ground element vertically takes up half the page, I instead want it to only be placed 50% from the top. When I try to apply the 'top' style to either of them nothing happens. I know this is because the #tree is relative to .Tree and I don't declare a height/ width. I don't declare a h/w because it makes my #tree image's w/h off.
Thank you for the help!
Edit, added clarification:
I want the divs to resize according to the window width. I don't want them to change their left position. And I want to be able to set a 'top' % because I currently can't.
Fiddle: https://jsfiddle.net/sqdgzbp6/
Notice on this website: anniwang.com that if you resize your entire window the drawings seem to also resize BUT they don't loose their position on the page. I want to recreate an effect similar to hers.
As the .Tree is an absolute positioned element, it need a height/width set explicit or else no child with percent will have anything to calculate their percent from, so in this sample I gave it a height and now top will work.
.Tree {
position: absolute;
height: 100%;
width: 100%;
}
#tree {
position: relative;
height: auto;
width: 60%;
left: 30%;
top: 20%;
}
.Ground {
z-index: 2;
width: 100%;
height: 100%;
}
.Ground .g {
background-color: green;
opacity: .5;
position: relative;
height: 50%;
width: 100%;
}
<div class="view">
<div class="Tree">
<img id="tree" src="http://www.placehold.it/200/100">
</div>
<div class="Ground">
<div class="g"></div>
</div>
</div>
By the sound of it, you want divs to stop resizing when you've previously set a size of 50%. Remember this is only 50% of the window screen, so no matter how big or small the window, it will always scale to 50% of whatever you're viewing on. If you want it to be fixed, you could use 500px that way it doesn't move because it's set to a fixed 500.
Hope this helps.