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");
}
Related
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
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 am trying to attach a div to the bottom of the page. This page is not scrollable, but I cannot set top by pixel because it needs to be responsive to screen size. All I want is a div at the bottom of the page that takes up 100% of the horizontal space and 20% of the vertical space.
What I've tried:
Making parent relative and child absolute.
Setting parent's min-height: 100%
Here is my code:
<html>
<head>
<title>Forget It</title>
<link rel="stylesheet" href="../static/styles.css">
</head>
<body>
<div class='parent'>
<div class='ground'></div>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
bottom: 0;
background-color: #2cb84b;
}
Any ideas? Thanks!
Just apply width: 100%; to .ground to make the div take full width.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #96b4ff;
}
.parent {
position: relative;
min-height: 100%;
}
.ground {
position: absolute;
height: 20%;
width: 100%;
bottom: 0;
background-color: #2cb84b;
}
<div class='parent'>
<div class='ground'>footer</div>
</div>
I'm trying to use only the bottom section of an image as the background on my layout. Here is the CSS to make the image appear how I want it to.
CSS:
.image{
position: absolute;
background-image: url("hero.jpg");
width: 1440px;
height: 1315px;
top:-760px;
}
So now when I put it in my html document like this any content I add is out of view because I put the -760px on the top of the image.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Apple</title>
</head>
<body>
<div class="container">
<div class="image">
</div>
</div>
</div>
</body>
</html>
My question is how can I use this image without having any added content appear above and off the page.
Rest of CSS:
body{
margin:0;
padding:0;
}
.container{
min-height:100%;
position:relative;
}
.image{
position: absolute;
background-image: url("hero.jpg");
width: 1440px;
height: 1315px;
top:-760px;
}
Instead of having a full sized container and moving it upwards using negative top value like the below:
body {
margin: 0;
padding: 0;
}
.container {
min-height: 100%;
position: relative;
}
.image {
position: absolute;
background-image: url("http://via.placeholder.com/1280x315");
width: 1280px;
height: 315px;
top: -160px;
}
<div class="container">
<div class="image">
</div>
</div>
Try using background-position: With setting the height of the image container as much as it needs to be displayed. In the below snippet, we used the background-position: center bottom; (it aligns the image set as background within the container to the bottom center)
body {
margin: 0;
padding: 0;
}
.container {
min-height: 100%;
position: relative;
}
.image {
position: absolute;
background-image: url("http://via.placeholder.com/1280x315");
width: 1280px;
height: 155px; /* 315 - 160 */
background-position: center bottom;
}
<div class="container">
<div class="image">
</div>
</div>
For learning more about background CSS properties refer:
https://www.w3schools.com/cssref/pr_background-position.asp
I'm trying to assign overflow:hidden to the wrapper but it is ignored. It works however, if I assign it to body. Does anyone have an idea how to make it work for the wrapper?
The HTML...
<head>
<meta charset="utf-8">
<title>Overflow Test</title>
</head>
<body>
<div id="wrapper">
<header></header>
<main>
<div id="content"></div>
</main>
</div>
</body>
</html>
The CSS...
html {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
}
#wrapper {
overflow: hidden;
}
header {
position: fixed;
top: 0xp;
left: 0px;
width: 100%;
height: 50px;
background-color: #d20000;
}
main {
width: 100%;
height: auto;
}
#content {
width: 100%;
height: 3000px;
background-color: #ffdd00;
}
Help would me much appreciated...
Thanks
Typo, change <div id="#wrapper"> to <div id="wrapper">
Update: I change the #content height to 100px, and created this fiddle to test if it works, and it seems it does. You must have removed much of your code in the example you provided, perhaps something else is causing the problem? Or is it the #content height 3000px that is the problem?
Update2: I think you want to activate/deactivate scrolling on body based on the status of your menu. I created this little fiddle with jQuery to show you how you can toggle a class on body. Just tie the listener to your menubutton instead of the whole wrapper element like I did, and watch the class .overflow getting added/removed to body. I hope this was the answer you where looking for?
Ok, I got it to work by putting my wrapper inside another div with position:absolute and top and bottom set to 0. I took inspiration from this thread http://goo.gl/U3OQQV
Here's the new fiddle... https://jsfiddle.net/aaandreas/esLcw3md/2/ Thanks for your effort turbopipp, I appreciate it!
Here's the updated HTML...
<body>
<div id="prewrapper">
<div id="wrapper">
<header></header>
<main>
<div id="content"></div>
</main>
</div>
</div>
And the updated CSS...
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#prewrapper {
position: absolute;
width: 100%;
overflow: hidden;
top: 0;
bottom: 0;
}
#wrapper {
position: relative;
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0xp;
left: 0px;
width: 100%;
height: 50px;
background-color: #d20000;
}
main {
width: 100%;
height: auto;
}
#content {
width: 100%;
height: 3000px;
background-color: #ffdd00;
}