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
Related
I'm trying to fit a small image into a larger div.
html, body {
height: 100%;
width: 100%;
}
/*About Us Page*/
.bgimage {
width: 100%;
height: 100%;
position: relative;
}
img {
max-width:100%;
max-height:100%;
}
#aboutus {
width: 250px;
height: 250px;
background-color: rgb(82, 63, 51);
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
border-style: groove;
border-color: rgb(75, 58, 36);
border-width: 20px;
margin: auto;
}
<html>
<head>
<meta charset="UTF-8">
<title>The Hewitt's Den: About Us</title>
<style>
#aboutus {
text-align: center;
}
</style>
</head>
<body>
<div class="bgimage">
<div class="navi">
<img class="AboutUsPic" src="https://img.freepik.com/free-vector/gray-white-gradient-abstract-background_53876-60238.jpg?size=338&ext=jpg">
</div>
<div id="aboutus">
<h1>About Us:</h1>
</div>
</div>
</body>
</html>
The image is too small to fit into the div, I could manually change the size of the image, but I want it to automatically fit, to accommodate other screen sizes. If it's possible, maybe it could maintain it's width-height size, to avoid looking stretched or compressed.
For img elements use object-fit: cover and in your case like this:
img {
width: 100%;
/* max-width: 100%; */
max-height: 100%;
object-fit: cover;
}
object-fit only works if you make the img element capture the full dimensions first - full width of its parent div in this case.
Working codesandbox
CSS background-image
background-size: cover
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
You should use property width: 100% for image element like this:
img {
width: 100%
}
I have this background image:
https://i.ibb.co/b5v8P1B/backgroundimage.jpg
... and this box image:
https://i.ibb.co/Kx6gtNJ/box.jpg
I want the background image to be a cover image and no matter how I resize the browser, I need to figure out (calculate) the cordinates of the grey box, so I can place the red box excatcly over the grey box like this final image:
Here's some test code:
html,
body {
margin: 0;
height: 100%;
}
.background {
background: url("https://i.ibb.co/b5v8P1B/backgroundimage.jpg") no-repeat center top;
background-size: cover;
height: 100%;
width: 100%;
}
.box {
background: url("https://i.ibb.co/Kx6gtNJ/box.jpg") no-repeat center center;
width: 600px;
height: 400px;
}
<div class="background">
<div class="box"></div>
</div>
I hope this solution will work for you in each and every case. If you find something wrong ping me in comments.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,
body {
margin: 0;
height: 100%;
width:100%;
padding:0;
}
.container {
padding:0;
margin:auto;
}
.background {
background: url("https://i.ibb.co/b5v8P1B/backgroundimage.jpg") no-repeat center top;
background-size: cover;
width: 100%;
padding-top:75%;
position:relative;
}
.box {
background: url("https://i.ibb.co/Kx6gtNJ/box.jpg") no-repeat center center;
position:absolute;
width:15%;
height:13.33%;
z-index:1000;
left:42.5%;
top: calc(15% - 1px);
}
</style>
</head>
<body>
<div class="container">
<div class="background">
<div class="box"></div>
</div>
</div>
</body>
</html>
I didn't have an issue tracking the horizontal movement but the vertical movement is tricky. The gray box moves vertically just a little bit and this solution doesn't account for that.
html,
body {
margin: 0;
height: 100%;
}
.background {
background: url("https://i.ibb.co/b5v8P1B/backgroundimage.jpg") no-repeat center top;
background-size: cover;
height: 100%;
width: 100%;
position: relative;
}
.box {
background: url("https://i.ibb.co/Kx6gtNJ/box.jpg") no-repeat center center;
width: 600px;
height: 400px;
position: absolute;
top: 14%;
left: 50%;
transform: translateX(-50%);
}
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");
}
I want to have a centered box with two images on each side of a box, overlapping. Later, I'll move top image for each box with jquery animate function away from bottom image.
This is my code so far:
html,
body,
#wrapper {
height: 100%;
min-height: 100%;
}
#wrapper {
align-items: center;
display: flex;
justify-content: center;
}
#center {
width: 800px;
border: 1px solid black;
text-align: center;
position: relative;
}
img {
width: 100%;
height: auto;
float: left;
}
#left {
//border:1px solid red;
width: 400px;
float: left;
//position:absolute;
}
#right {
//border: 1px solid green;
width: 400px;
float: right;
//position:absolute;
}
#top {
z-index: 1;
}
#under {
z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style1.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="center">
<div id="left">
<img src="http://s32.postimg.org/p5mgljj5x/drums_left.jpg" id="top">
<img src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under">
</div>
<div id="right">
<!--<img src="http://s32.postimg.org/6ep4p4dz9/drums_right.jpg" id="under">-->
<img src="http://s32.postimg.org/mzs5r1fph/workout_right.jpg" id="top">
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
I have managed to center this box and add one picture for each side (left, right), but when I want to add another picture on either side, that has z-index: -1 it breaks into new line..
Fiddle that is showing problem: https://jsfiddle.net/bjgydLvo/
You need to give your second image a class and position it absolute.
<img class="second" src="http://s32.postimg.org/4vp56ei11/workout_left.jpg" id="under">
.second {
position: absolute;
top: 0;
z-index: 2;
left: 0;
width: 100%;
}
Make sure you position your left element relative too
#left {
width: 400px;
float: left;
position: relative;
}
Remove #under
Working example
https://jsfiddle.net/46pk1vdf/4/
z-index wont work without assigning position..
Updated fiddle : https://jsfiddle.net/bjgydLvo/2/
#under{
z-index:-1;
float: none;
height: auto;
left: 0;
position: absolute;
width: 400px;
z-index: -1;
}
I have a page with two lines background.
One line is yellow and has a height: 65%, another line is gray and has a height:35%
And I have an absolutely positioned div in center with fixed width and height.
The gray lines is right under my div. The problem is, when I change the size of my page, or zoom out(to simulate big size screen) my div appears above gray background. If I set height of each background line to 50%, everything is good, but I need 65% and 35%.
Here's jsfiddle link: http://jsfiddle.net/J2LTR/
Try to zoom out on a page and the black square will go above the gray background.
Any ideas how to fix this?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%
}
.yellow {
width: 100%;
height: 65%;
background: #e5bd00;
background-repeat: repeat;
}
.gray {
width: 100%;
height: 35%;
background: #d2d2d2;
background-repeat: repeat;
}
.wrap {
min-width: 300px;
width: 100%;
height: 100%;
min-height: 600px;
margin: 0 auto;
position: relative;
}
.center_box {
background: #000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -200px;
width: 400px;
height: 235px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="yellow"></div>
<div class="gray"></div>
<div class="center_box">some content</div>
</div>
</body>
</html>
your value for top and margin-top are not correct, cause it is based on center and your boarder is down 65%.
try this instead:
.center_box {
background: #000;
position: absolute;
top: 65%;/* the tune you need to start with */
left: 50%;
margin-top: -235px;
margin-left: -200px;
width: 400px;
height: 235px;
}
http://jsfiddle.net/J2LTR/1/
You could even use a linear-gradient on body if you want to include only young browsers : http://codepen.io/anon/pen/EImiz