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>
Related
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');
});
}
);
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 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'm trying to put an image inside a div of the same dimension but for some reason the image keeps appearing to right of the div even though it's inside the div in my html:
<div>
<img width="16" height="16"></img>
</div>
I created a JSfiddle that shows what's going on: https://jsfiddle.net/5q0s3y1j/
Can anybody help me understand how to put the image inside the div?
The issue is with left: 20px; in your .userFlair css. It's telling the image to shift 20 pixels left from the start of the container, which is larger than the container itself.
Changing this to left: 0; or omitting it completely will put the image in the div.
Here's an updated fiddle.
Remove the left: 20px on your image class.
.userFlair {
position: absolute;
bottom: 50%;
// left: 20px;
transform: translateY(50%);
}
See updated fiddle: https://jsfiddle.net/5q0s3y1j/2/
You don't need to position your img separately. You can simplify your code to just this css.
.lobbyFlair {
border: 1px solid red;
height: 16px;
width: 16px;
display: inline-block;
position: relative;
}
<div class="lobbyFlair">
<img class="userFlair" width="16" height="16" src='http://66.media.tumblr.com/avatar_2dde66f8a62c_16.png'/>
</div>
I made an simple layout for an android application using html and css. The hole page has an background image, but i didnt declared it as:
background-image: url(
Because so belong my information i cannot center it?
So that my next plan was to make an simple div that covers the image as you can see here:
<body>
<img src="foto.jpg" class="bg">
<div class="oben">
<h1>Playing Audio</h1>
<button onclick="playAudio('test.mp3')">Play Some Audio</button>
<button onclick="playAudio('test2.mp3')">Play Some Audio2</button>
</div>
</body>
My css is the following:
.image{
position: relative;
width: 100%;
}
.oben {
position: absolute;
top: 20%;
left: 0;
width: 100%;
}
SO now back to my actual problem, the image is not streching to the 100% of the viewport instead it is having 100% of its own width, what means around 200px! But i want to strech it all over the page! Thanks!
That's becuase there is no such thing as .image
You should try this
img.bg{
position: relative;
width: 100%;
}