I have this background, the css code is:
body {
background: #FFF url('images/bg.png') no-repeat bottom center;
margin-bottom: -500px;
width: 100%;
height: 100%;
color:#999;
}
The image is 400px tall, and I would like to make it align to the bottom of the page.
So far, this only works in Firefox. In Chrome and IE the background position is at top center, instead of bottom center.
You need to make the html element height 100% too:
html, body {
height: 100%; width: 100%;
padding: 0; margin: 0;
}
body {
background: #FFF url(images/bg.png) no-repeat bottom center;
}
Also, negative margins don't work in IE6/7 (not sure about IE8)
Related
I was looking for a solution to make my opening background image to be 100% of the viewport and after using Josh powel''s answer here Page height to 100% of viewport? it works on chrome on mac but not on any other browser (on mac or windows) When I say 'it works on chrome on mac', it works in most instances however if I stretch the browser too high, it doesn't fit to cover and I see my next bit of content so it's like it only works for heights up to x...
here's my code:
<section class="intro">
<div class="intro-body">
</div>
</section>
.intro {
display: table;
width: 100%;
height: 100%;
padding: 350px 0 330px;
text-align: center;
color: #fff;
position: relative;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size:cover;
}
.intro-page {
padding: 150px 0 130px;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size: cover;
}
function windowH() {
var wH = $(window).height();
$('.intro, .intro-page').css({height: wH});
}
Fiddle here http://jsfiddle.net/9h98f/1/
If anyone can shed any light, that'd be great.
In order to make an element 100% height of the page, you must also have:
html,body { height: 100%; min-height: 100%; }
It's much better and more reliably to do this in CSS than by using JS.
Alternatively, you could just put the background image on the body (with background-size: cover like you are using).
I am having trouble with centering a background behind a div. I have made a fiddle showing how the background image stays center whilst the browser window is resized, which is great, but if the scrollbar is moved down so to view the bottom of the green div, the back ground follows the scroll, so is no long centered, which I am trying to avoid. I hope for the center text of the bk-gnd image to remain central in the view port at all times, whether resizing the screen or scrolling, is this possible?
here is the interactive fiddle : http://jsfiddle.net/4fM2n/
CSS
html, body {
height: 100%;
margin: auto;
}
#bk-gnd-div {
height: 100%;
background-image: url('http://oi58.tinypic.com/5an82h.jpg');
margin: auto;
background-repeat: no-repeat;
background-position: center center;
background-color: #9FBBE2;
}
the other div code is on the fiddle, stackoverflow is saying it is not formatted correctly and wont let me post it? maybe this is a clue?
add css
*{
margin: 0;
padding: 0;
}
#bk-gnd-div {
margin: 0 auto;
width: 100%;
}
or image fixed center
body {
width: 100%;
height: 100%;
background-image:url('http://oi58.tinypic.com/5an82h.jpg');
margin:0 auto;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
I've got this logo I'm trying to use on a responsive site, but I can't figure out how to have it so it fills the full width of its parent element while maintaining its ratio in height.
When you start resizing the browser window, the logo gets smaller in width but its height doesn't scale properly. Is there a way to maintain this.
Here's my CSS for the logo element:
h1 {
width: 100%;
height: auto;
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
margin-top: 270px;
}
This is the problem I'm having. Look at all that extra space below the
logo.
And here's a CodePen with an example of my issue:
http://codepen.io/realph/pen/LAFsi
Any help with this is appreciated. Thanks in advance!
You could use a padding trick (see CSS-square container) to do what you want with one image
h1 {
background: url(http://images.uncyclomedia.co/uncyclopedia/en/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png) no-repeat top left orange;
background-size: contain;
text-indent: -999999px;
text-align: center;
position:relative;
width:100%;
height: 0;
padding-bottom: 30%;
display:block;
}
Demo
How to create background like this in css(middle and last block has fluid height):
Are there any good tutorials?
You would make the top and bottom div elements and set their css as follows:
#topBGDiv
{
width: 100%;
height: 125px; // Make this the height of the background image in pixels
background-image: url('dark-gray-ribbon.jpg');
background-repeat: repeat-x;
overflow: hidden;
}
#bottomBGDiv
{
width: 100%;
height: 110px; // Make this the height of the background image in pixels
background-image: url('light-gray-ribbon.jpg');
background-repeat: repeat-x;
overflow: hidden;
}
use an image like this for the background image of the top:
and one like this for the bottom:
Lastly, set the CSS for the page's background-color to be the middle color. So, something like this:
body
{
background-color: #C0C0C0;
}
You can write like this:
#top,#bottom
{
height: 110px; // Make this the height of the background image in pixels
background: url('BG.jpg') repeat-x left top;
}
#bottom
{
background-position:left bottom;
}
* { margin: 0; padding: 0; }
body {
margin: 8px auto;
background: #20272D;
width: 900px;
}
body, td, input, textarea {
font: 11px Tahoma;
color: #DDD;
}
#content {
width: 400px;
margin: auto;
background: url(img/blixt.png) 0px 18px no-repeat;
padding-left: 25px;
}
There's a image (blixt.png) that I want to show up as background no matter how long the content inside <div id="content"> is! If its short only a bit of the image shows and as longer the text the more it shows. How can I fix so it shows the whole image no matter what? I don't want to set height.
You can set a min height, but that will require you to set a IE height fix because min-height won't work in IE.
The problem here is pretty obvious. You have an element with a background image but no height on it, so of course it's going to default to the height of the content inside it.
You can either put a height on the #content element, or move the background image to the body.
try this in the body css:
background-image: url(img/blixt.png) no-repeat;
background-color: #20272D;