I'm trying to align the background image of a div to the top of the div, but it continues to align it to the top of either the parent div or the whole page (I'm not sure which one, but I think it's page)
JSFiddle: https://jsfiddle.net/Minecraft_Percabeth/1wbuduze/2/
The background image of the #bottom div should show over the top of their heads, but instead the top is aligned to the top of the #wrap div. Edit: The image should also stay where it is when scrolling down, which is why I'm currently using fixed.
Change the margin-top to 0 to see what I mean.
<div id="wrap">
<div id="bottom"></div>
</div>
#wrap {
background-color: yellow;
height: 500px; width: 500px;
position: absolute;
}
#bottom {
background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
height: 400px; width: 500px;
margin-top: 100px;
}
The fixed in
background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
Is the shorthand for background-attachment: fixed;That is why the background image is fixed to the top "the page".Without this property the background image moves to margin-top: 100px;
Edit:
In order to move the background image vertically, you can use background-position: center XY%; and add again background-attachment: fixed;
#bottom {
background-image: url("http://i.imgur.com/BsTVroc.jpg");
background-repeat: no-repeat;
background-position: center 20%;
background-attachment: fixed;
height: 400px;
width: 500px;
margin-top: 100px;
}
#wrap {
background-color: #737373;
height: 500px;
width: 500px;
position: absolute;
}
<div id="wrap">
<div id="bottom"></div>
</div>
You can use background-position: center 100px; - this will move the background image down by 100px.
Related
Take the following code:-
HTML:
<div id="wrapper">
<div id="nottingham-park">
</div>
CSS:
#wrapper {
width: 100%;
height: auto;
}
#nottingham-park {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
background-size:100% auto;
background-repeat: no-repeat;
display: block;
//height: 700px;
}
FIDDLE
If I don't set a height to #nottingham-park, the background image isn't visible, if I set a height, it's not responsive.
How can I display the image so it's always 100% width and auto height?
you can force the size of #nottingham-park to the size of the background-image with padding-top. see the comments in the css to see how you can calculate what the padding-top should be.
this way your image will be responsive and never stretched out of proportion.
hope this is what you are asking for.
#wrapper {
width: 100%;
height: auto;
}
#nottingham-park {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
background-size: contain;
background-repeat: no-repeat;
display: block;
/*
width of image / height of image * width
699px / 1200px * 100 = 57.7208918249
(change the 100 in this formula to whatever you want.)
*/
padding-top: 57.7208918249%;
}
<div id="wrapper">
<div id="nottingham-park">
</div>
</div>
EDIT
How about a fluid padding-bottom ?
Like this
#nottingham-park {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
background-size:100% auto;
background-repeat: n-repeat;
display: block;
padding-bottom : 55%;
}
I have a fixed header that i want to keep behind the container div as I scroll down the page. as seen on http://www.madebydaryl.co.uk/. It's sorta working except the background of the content div seems to be hidden behind the background of the header. Not sure how to solve this..
My css:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
display: table;
width: 100%;
z-index: 1;
top:0;
left:0;
}
.container {
position: relative;
margin-top:100vh;
background: #fff;
z-index: 2;
}
EDIT:
This kinda worked:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
min-height: 100%;
width: 100%;
display: table;
top:0;
left:0;
}
.container {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
margin-top:100vh;
background: #fff;
}
Except the background of the container div doesnt stretch to cover all of the content, just the height of the viewport. Any ideas?
The effect that you are talking about is known as Parallax Sliding effect,
Check it here
http://stephband.info/jparallax/
or
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellar-js--webdesign-7307
Alas, such a simple solution.
Just put another div inside the container div, and give it the background color.
so:
<header>content</header>
<div class="container>
<div class="bg">
Main content
</div>
</div>
and the same css except move the background to the .bg.
So I have a page where the header image can be wider than the width of the content. Say, the content is always 960px wide, but the header image could 1200px wide.
So in order to keep the header image centred I'm using the left: +/-50% trick.
<div class="page">
<header>
<div class="image"><img /></div>
</header>
<article>lots of text...</article>
<div>
div.page {
width: 200px;
background: blue;
margin: 0 auto;
height: 400px;
}
header {
height: 75px;
}
div.image {
position: absolute;
left: 50%;
border: 1px red solid;
}
img {
position: relative;
left: -50%;
height: 50px;
width: 500px;
background: green;
}
article {
background: yellow;
}
So as in this fiddle http://jsfiddle.net/P7F7j/ you can see that horizontal scroll bars display because div.image is off screen, and the same would happen if img is off screen too. Is there any way to remove these elements from the flow so they don't trigger horizontal scrolling?
Make the header min-width: 960px; width: 100%; and set the image as a background-image with style no-repeat center top
That way the header will always be at least 960px and will be filled with your image. Overflowing is handled automatically with background-images.
I'm working on a site that has a fixed width div that is centered and I wanted to have two designs on either side of the div which I was able to get using two divs. The issue is the way I did it, those images add to the site width, causing a horizontal scroll bar to appear if the window is too small. Even though the whole content div fits with in the screen.
CSS
.container {
margin: 0 auto;
width: 500px;
}
.span {
margin-right: 0;
width: 500px;
}
.logo {
margin-top: 25px;
}
.logo-img {
height: 60px;
left: -21px;
position: relative;
}
.swirls {
height: 0px;
}
.left-swirls {
position: relative;
top: -50px;
right: 100px;
width: 188px;
z-index: -1;
}
.right-swirls {
position: relative;
top: -50px;
left: 215px;
width: 200px;
z-index: -1;
}
.nav {
background-color: #0ff;
}
.content {
background-color: #00f;
height: 200px;
}
HTML
<div class="container">
<div class="span logo">
<img src="http://imageshack.us/a/img839/2507/logongv.png" class="logo-img"/>
</div>
<div class="span swirls">
<img src="http://imageshack.us/a/img831/3254/leftswirls.png" class="left-swirls" />
<img src="http://imageshack.us/a/img600/7424/rightswirls.png" class="right-swirls" />
</div>
<div class="span last nav">
Nav Bar
</div>
<div class="span content">
Body content
</div>
</div>
An example of the issue can be viewed here: http://jsfiddle.net/e4j6b/8/
I'm trying to get the background image(s) centered relative to the div instead of the sides of the browser.
Is there a way to center a background image just like a div with margin: 0 auto?
If you want .left-swirls and .right-swirls to not add to the width of the document, then they should be background images. (For modern browsers, multiple background images work fine.)
Example: http://jsfiddle.net/MbGSP/1/
body {
background: url(http://imageshack.us/a/img831/3254/leftswirls.png) center center no-repeat,
url(http://imageshack.us/a/img600/7424/rightswirls.png) center center no-repeat;
}
You can center background images, both horizontally and vertically, with center center for the positions.
I have a div I would like which I have placed at 25% from the top. However, the 25% are computed with respect to the size of the background image and not with respect to the size of the visible screen. How can this be fixed?
Update: now the top margin works, but not the left one :(
Any clue?
body {
background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;
background-size: auto 100%;
background-attachment: fixed;
overflow: hidden;
align: center;
}
#container {
background-color: #ffffe4;
position: absolute;
width: 776px;
height: 400px;
top: 25%;
margin-left: auto;
text-align: center;
overflow: auto;
}
1) use absolute positioning:
#myDiv { position: absolute; top: 25%; }
2) make sure your div is not within another positioned element (if you're not sure of this, just put it just inside the <body> tag, nothing else)
use css property:
div#myDiv {
position:absolute;
top: 25%;
}
on the dive that you want placed 25% from top of visible screen.
if you use relative position then the percentage will be calculated from the parent element.
if you use absolute position the percentage will be calculated from the size of the screen.
So try to using position absolute instead of relative.
edited answer for comment, just add extra div with id wrapper and change postitions, see example below:
<html>
<head>
<style type="text/css">
body {
background: #eeeeee url('pix/bg-noether-2.jpg') no-repeat center top;
background-attachment: fixed;
overflow: hidden;
text-align: center;
}
#wrapper {
position:absolute;
width:100%;
height:100%;
}
#container {
background-color: #ffffe4;
position: relative;
margin:0 auto;
width: 776px;
height: 400px;
top: 25%;
text-align: center;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
bla bla bla
</div>
</div>
</body>
</html>