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%);
}
Related
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 have a #div1 with 100% height and #div2 inside #div1. #div2 located at the top of #div1 with semi-transparent background. But, because the #div1 have a repeating background, translucent under the #div2 is the background of #div1. I want to "move" the background of #div1 from the top of the height of #div2
see image
CSS:
#div1 {
border: none;
width: 812px;
height: 100%;
background-image: url(http://i.imgur.com/tcPWRzF.png);
background-repeat: repeat-y;
margin: 0 auto;
}
#div2 {
background-image: url(http://i.imgur.com/DnDnz22.png);
background-color: transparent;
background-position: center;
width: 812px;
height: 488px;
}
HTML:
<div id="div1">
<div id="div2">
</div>
Give div1 a little window to show through by giving it padding-top. http://codepen.io/amishstripclub/pen/VKdjmr
#div1 {
padding-top: 488px;
}
For some reason that image in div1 isn't repeating. I don't know if this will work for you, but you can play around with it.
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
#div1 {
position: relative;
top: 75px;
border: none;
width: 812px;
height: 100%;
background-image: url(http://i.imgur.com/tcPWRzF.png);
background-repeat: repeat-y;
margin: 0 auto;
}
#div2 {
position: relative;
top: -75px;
background-image: url(http://i.imgur.com/DnDnz22.png);
background-repeat: no-repeat;
background-color: transparent;
background-position: center;
width: 812px;
height: 488px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
try flexbox alternative for block level alignment
#div1 {
border: none;
width: 812px;
min-height:1200px;
height: 100%;
background-image: url(http://i.imgur.com/tcPWRzF.png);
background-repeat: repeat-y;
margin: 0 auto;
display: flex; /* establish flex container */
align-items: center;
}
#div2 {
background-image: url(http://i.imgur.com/DnDnz22.png);
background-color: transparent;
background-position: center;
width: 812px;
height: 488px;
}
<div id="div1">
<div id="div2">
</div>
PC : Michael_B
this is my code:
body{
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header{
height:2em;
width:100%;
position:fixed;
top:0; left:0;
background-color:white;
}
.main{
width:100%;height:10em;
margin-top:5em;
background-color:white;
}
.mainPanel{
width:50%;
margin:auto;
background-color:yellow;
height:5em;
}
<html>
<body>
<div class="header">
</div>
<div class="main">
<div class="mainPanel">
</div>
</div>
</body>
</html>
I want that the yellow div is transparent and shows the background image of body. That the yellow div go trough the white div behind it and shows the background image of body. Is that possible? I hope it comes clear what i meant.
The only workaround I can think of would involve breaking your white box into three rectangles and arranging them to form a window of sorts. Here, try this out:
body {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
.header {height:2em;width:100%;position:fixed;top:0; left:0;}
.main {
width: 100%;
height: 10em;
margin-top: 5em;
}
.mainPanel{
width:50%;
margin:auto;
height:5em;
}
<html>
<body>
<div id="left-rectangle" style="background-color: white; width: 25%;height: 160px; position: absolute;"></div>
<div class="right-rectangle" style="background-color: white; width: 25%; float: right; height: 160px;"></div>
<div class="center-rectangle" style="position: absolute;margin-left: 25%;background-color: white;width: 50%;height: 80px;margin-top: 80px;"></div>
<div class="header">
</div>
<div class="main">
</div>
</body>
</html>
You could simply repeat the background, and since it has a fixed position, it will be exactly like the body background and you will not notice a difference.
body, .mainPanel {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
Simply extend the background of body to .mainPanel to create the illusion.
Demo: jsFiddle
html, body {padding: 0; margin: 0;}
body, .mainPanel {
background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat center center fixed;
background-size: cover;
}
.header {
height: 2em;
width: 100%;
position: fixed;
top: 0; left: 0;
background-color: #EEE;
}
.main {
width: 100%;
height: 10em;
margin-top: 5em;
background-color: white;
}
.mainPanel {
width: 50%;
margin: auto;
height: 5em;
border:1px dashed #CCC; /* just for demo */
}
<div class="header">header</div>
<div class="main">
<div class="mainPanel">
</div>
</div>
We want to display an image like this centred in a page: the height should be 100% of the window height, with corresponding proportional width. On either side of the image, we'd like to continue the grey brick pattern that you see at top and bottom of the image across the page on either side. The background should match the size of, and line up with, the one in the image, however big the image is.
Can anyone suggest a CSS-only way to do this?
Here's the kind of markup I've been trying so far:
<div id="container">
<img src="http://i.metro.co.uk/images/temp/visual.png" id="middle">
</div>
CSS:
#container {
height: 100%;
background: url(visual-top.png) repeat-x;
}
#middle {
outline: 1px solid red;
display: block;
height: 100%;
margin: 0 auto;
}
Here's a Codepen.
Sure you can. You might run into aliasing-problems so that your images don't line up perfectly, but in theory it's easy.
The way I would do it is using multiple backgrounds. Here is the CSS you need:
body {
background: url([screenshot.jpg]) center top no-repeat, url([tile.jpg]) center top repeat-x;
background-size: auto 100%, auto 17.5%;
}
Then you need to fiddle with the height of the tile. I came up with 17.5%, but that depends on your screenshot.
Here is a working fiddle.
<div id="brick">
</div>
<div id="mario">
</div>
css
html,body{
width: 100%;
height: 100%;
margin: 0;
}
#brick{
position:absolute;
width: 100%;
height: 60px;
background-color:gray;
background-image: url(brick.jpg);
background-size: 100% 100%;
top:0;left:0;
z-index: -1;
}
#mario{
width: 400px;
height: 100%;
z-index: 2;
background-image:url(mario.jpg);
background-size: 100% 100%;
margin: auto;
border: 1px solid;
}
yes it can be done.
<div class="wrapper"><img src="yourimage.jpg"/></div>
the css
.wrapper{
width:100%;
height:100%;
text-align: center;
}
.wrapper img{
height:100%;
z-index:1;
}
So it will be on top of your background
html:
<div class="wrapper">
<div class="top"></div>
<img src="path/to/img.jpg"/>
</div>
and the css:
.wrapper{
text-align: center;
height: 100%;
width: 100%;
position: relative;
}
.wrapper .top{
position: absolute;
height: 80px;
left: 0px;
top: 0px;
background: url('pattern.jpg') 0 0 repeat;
width: 100%;
z-index: -1;
}
.wrapper img{
height: 100%;
width: auto;
}
<body>
<style>
.main{
width:100%;
display:table;
text-align:center;
height: "image-height";
}
.wrapper{
width:100%;
height:auto;
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<div class="main">
<div class="wrapper">
<img src="image.jpg">
</div>
</div>
</body>
You can try this. This is nice article.
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