Hello I wanted to know if please can some one could help me to add one image called or loaded from css to a multiple images on html.
EXAMPLE:
Thanks in advance.
I think it will work for you
.image-wrap {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image-wrap:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: url(https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
<div class="image-wrap">
<img src="https://picsum.photos/300/450" />
</div>
I think you are need something like this.
.fi
{
z-index: 1;
width: 100%;
}
.fi2
{
position:absolute;
top: 25px;
left: 45%;
z-index: 2;
width: 300px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<img src="https://images.news18.com/ibnlive/uploads/2021/07/1627377451_nature-1600x900.jpg" class="fi" >
</div>
<img src="https://media.newyorker.com/photos/5a95a5b13d9089123c9fdb7e/2:2/w_3289,h_3289,c_limit/Petrusich-Dont-Mess-with-the-Birds.jpg" class="fi2">
</body>
</html>
Let me know if this helps you
Here is one thing you could do.
Make sure the image sample ( has no background color ). then give it the same size and postion as the image with the background. when thats done give the image sample and z-index of 1. which will push it above the other picture.
.image1
{
z-index: 1;
width: 100%;
}
.imge2
{
position:absolute;
top: 25px;
left: 45%;
z-index: 2;
width: 300px;
margin: auto;
}
hope this is the solution to your answer
Related
I have a header section that should wrap according to the header image. Every page has a different image so it must be responsive. However header section will not wrap with the image since it is absolutely positioned.
As you can see in the snippet the image has height: auto on it and just overflows outside of the parent. Is there anyway to make the parent wrap according to the image?
*, ::before, ::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#header::before, #hero.background-wrapper::before {
opacity: 0.2;
}
.background-wrapper::before {
content: '';
position: absolute;
background-color: #000;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .5;
z-index: 0;
}
#hero {
color: #fff;
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 80px;
padding-bottom: 60px;
position: relative;
font-family: 'Montserrat', sans-serif;
z-index: 1;
}
.hero-content {
max-width: 911px;
justify-content: flex-start;
text-align: left;
}
.hero-content {
padding: 0;
position: relative;
display: flex;
}
.hero-text {
margin-top: 100px;
max-width: 750px;
}
.background-wrapper picture {
position: absolute;
height: auto;
width: 100%;
inset: 0;
z-index: -1;
aspect-ratio: auto;
}
.background-wrapper picture img {
position: absolute;
height: auto;
width: 100%;
top: 0;
left: 0;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="hero" class="background-wrapper">
<div class="container hero-content">
<div class="hero-text">
<h1>Header</h1>
<h2>Header description</h2>
</div>
</div>
<picture class="hero-picture">
<source srcset="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399.jpg.webp" media="(min-width: 600px)">
<img src="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399-450x300.jpg.webp" alt="landing image" decoding="“async”">
</picture>
</section>
</body>
</html>
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.
Alternatively, just use float: left/float:right and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden on the parent (or any other clearfix technique) to cause its height to expand to that of its children.
I am trying to create an html page that has a section that appears when an element is hovered over. I did this by using :hover + .myclass in my CSS. It was working fine until I tried positioning the elements.My div that needed to appear had a background color, but when I positioned the elements in the div, the background color disappeared! Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript, Social">
<meta name="description" content="Web-app to find and befriend new people!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu {
display: block;
position: fixed;
top:0%;
left:0%;
height: 100%;
width: 3%;
padding:0%;
margin: 0%;
background-color: greenyellow;
}
.big_menu {
display: none;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.big_menu:hover {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
.menu:hover + .big_menu {
display: block;
position: fixed;
left: 3%;
top:0%;
height: 100%;
padding:0%;
margin: 0%;
background-color: greenyellow !important;
}
</style>
</head>
<body>
<div class="menu">
<p style="position: absolute; top: 5%; left: 5.8%">Home</p>
</div>
<div class="big_menu">
<p style="position: absolute; top: 5%; left: 5.8%;">Details</p>
</div>
</body>
</html>
Can someone please explain to me why this is happening and how to fix it?
ETA the Correct Answer:
Temani's answer was correct, but I can elaborate a bit: elements positioned absolutely are removed from the flow of the document. Simply removing the absolute position from the second p element is enough to get the background to show
Position: absolute and parent height?
I would like to frame the picture in this way, but I do not know what is wrong with the code, that the bottom part of the border is thicker than the top (red border) link to the view
[1]: https://i.stack.imgur.com/quFZn.jpg
Code:
.image {
flex: 1 1 40rem;
position: relative;
&::before,
&::after {
content: '';
position: absolute;
z-index: -1;
background: $red;
height: 25rem;
width: 25rem;
}
&::before {
top: 0;
left: 0;
}
&::after {
bottom: 0;
right: 0;
}
img {
width: 100%;
padding: .5rem;
}
}
the idea here is two create two divs and put the them behind the image (responsively using position)
just change the --outside-value var for creating bigger border or smaller
with the var in * selector is equal in all two borders :)
hope this helps, good coding!
here the code
* {
--outside-value: -0.2em;
}
html,
body {
height: 100%;
}
body,
#content {
display: flex;
justify-content: center;
align-items: center;
}
#content {
position: relative;
}
#content img {
width: 50vw;
z-index: 1;
}
.border {
width: 30vw;
height: 10vh;
position: absolute;
background-color: red;
}
.border-bottom {
top: var(--outside-value);
left: var(--outside-value);
}
.border-top {
position: absolute;
bottom: var(--outside-value);
right: var(--outside-value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<div class="border border-top"></div>
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg">
<div class="border border-bottom"></div>
</div>
</body>
</html>
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
I currently have this fiddle :
https://jsfiddle.net/0g3u8452/1/
I have a 1920x4000 image, and I would like it to take the full width of the screen just like the
background-size: cover
but since the image has an important height, I'd like to be able to scroll down to keep seeing it
I made a picture of the result i'm trying to get :
Thank you in advance for any help :)
Try using <img> with position: absolute as a background instead?
.container {
position: relative;
}
.container img.background-img {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}
body {
padding: 0;
margin: 0;
}
<div class="container">
<img src="http://via.placeholder.com/1920x4000" class="background-img">
<div class="other">Other elements</div>
</div>
Is this what you are trying to achieve FIDDLE
.bg {
height: 4000px;
}
Are you looking for something like this? i just changed it a bit.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg">
<div class="cont"></div>
</div>
</body>
</html>
body,
html {
height: 100%;
margin: 0;
}
.bg {
height: 100%;
width: 100%;
}
.main {
width: 100%;
height: 100%;
}
.cont {
width: 100%;
height: 4000px;
background-image: url("http://via.placeholder.com/1920x4000");
}