I am trying to put background image at end of page ( at bottom bar) but key word bottom does not work, if I use like 900px or 55em it does work but in inspect element shows in middle of page.
<!DOCTYPE html>
<html>
<head>
<title>Test Website</title>
<style type="text/css">
body{
background: url('google2.png') no-repeat center bottom;
}
</style>
</head>
<body>
</body>
</html>
The body doesn't seem to take up the full height. So in your CSS, add this:
html, body {
height: 100%;
}
Related
So, I have a website I'm making for school. I'm trying to add an image in CSS so I can add style's to them, but it won't show. The linking is absolutely fine since when I type any letters in the div I'm using for the image, it shows up in the parameters of the text! This is confusing, so i'll show you:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HELLO</title>
</head>
<body>
<div class="fullImg">
<!-- if I say something like 'HI' in this div, part of the image shows up, but not without it! -->
</div>
</body>
<style type="text/css">
.fullImg {
background-image: url('img.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
</style>
</html>
Without any content your div has a height of 0, therefore no background image is visible. You’ll need to do something to ensure the div has a nonzero height. There are a variety of ways to do it, including setting height: 100vh or min-height: 400px. Setting height: 100% is ineffective if the containing element has zero height.
You should place stylings in the head element of the page
You have to put the following CSS style rule before .fullImg
html, body {
height: 100%;
}
I don't get it, why does the browser's vertical scroll-bars appear when running the following code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<h1>some text</h1>
</body>
</html>
Here is a live example - http://codepen.io/anon/pen/jlfCv
when I change the <h1> element to a <div> element, they disappear.
What am I missing? :-)
Thanks!
The h1 element has margin. Margins collapse when two elements are next to each other and form one margin taking the size of the largest value. In this case, you set the body's margin to zero but the h1 margin is still there. Since the h1 element is part of the body, it pushes against the top of the viewport which also pushes the body element down.
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Just add this CSS rule:
h1 {
margin: 0;
}
Check this DEMO
The problems occured because the UA stylesheet add a margin to some elements (like the h1 element) by default.
Here is my CSS:
.header
{
background-image:url(Images/head.png);
background-position: center top;
background-repeat:no-repeat;
width:1010px;
height:269px;
}
This is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xSky Software - Most likely the only software on Clickbank that exists.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"></div>
</div>
</body>
</html>
I am trying to get my image centered on the X-axis, and top'ed on the Y-axis. However my CSS class .header wont do that. Can you see what I am doing wrong?
EDIT: Turning the top center around does not work either
Your background-position values are around the wrong way. It should be:
background-position: 50% 0; /* Short values FTW! */
Don't forget if you want it to stay centered, you'll also need to do something like wrap the content in a container and use margin:0 auto on it to keep everything centered.
HTML:
<div class="wrap">
<div class="header"></div>
</div>
CSS:
.wrap {
width:1010px;
margin:0 auto;
}
.header {
width:1010px;
height:265px;
background:transparent url('//placehold.it/1010x265') no-repeat;
}
Demo: jsfiddle.net/UGDxU/show (or edit it)
The order of background-position is left top. Try flipping the values.
You'll also need background-repeat: no-repeat.
jsFiddle.
i have a div who have some image inside them. i need to show them in center align means if i normally put that they align left.
the image is dynamic maybe it's small or big. i need to show them in middle in every condition.
how i can do this using css. any trick to do this
Use this:
img {
margin-left:auto;
margin-right:auto;
display: block;
}
Here is a sample page:
<!DOCTYPE HTML>
<html lang="en-EN">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
#container {
background-color: yellow;
width: 500px;
height: 300px;
}
img {
margin-left:auto;
margin-right:auto;
display: block;
}
</style>
</head>
<body>
<div id="container">
<img src="http://www.google.com/images/logos/ps_logo2.png" alt=" " />
</div>
</body>
</html>
Anyway, you have to try it in all the browsers, I'm not sure if it works in all of them.
Centering stuff in HTML with CSS is one of the most painful things.
You could try applying the style text-align: center to the div.
I you need the image to be at the horizontal center you can use the text-align: center on the div container as shown here
But if you need the image to be horizontal and vertical center then it will be easy to do as given here using the background style property
I'm trying to fix an image to the bottom of the document for a HTML page.
My strategy roughly involves a setting the CSS height of the html node to 100%, and setting the background-position of the background-image to bottom.
This works for pages with a document shorter than the viewport size, but for documents with a length greater than the viewport size, the background is positioned in the middle of the page.
Without knowing whether the document will be longer than the viewport or not, how can I fix the background at the end of the document?
I've managed to get it working as required in Firefox only with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
}
.wrapper {
background: #eaeaea url(ufford-logo.jpg) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
The inline style on the p tag simulates a long document.
This works for me in Firefox 3.5, IE8/7c, Chrome 2. Doesn't work in Opera 10b but I would expect it to work in the stable version (9.6).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
min-height: 100%;
}
.wrapper {
background: #eaeaea url(http://sstatic.net/so/img/so/logo.png) scroll repeat-x bottom center;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<p style="height: 2000px;">test</p>
</div>
</body>
</html>
I think what you're trying to achieve is very similar to this layout, though in your case you would just stick your image into the footer element (or have it as a background on the footer). If you have a more complex page layout you may be able to adapt the code, or you could try this approach using javascript.
If you want to stick something to the bottom of the visible window, you can do so using CSS. This will work on render (and on window resize).
#specialBackground {
background-image: url(bg.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100px;
z-index: -1;
position: absolute;
bottom: 0;
}
This will place the image where you want it - you will need to change the background-image and the height appropriate to your image. The z-index places the division behind other content, but it doesn't hurt to define the division earlier in your document too (you can define it anywhere and the position will be unchanged).
To keep the division at the bottom of the viewport when the visitor scrolls the page, you'll need to use JavaScript. Example below:
window.onscroll = function() {
document.getElementById("specialBackground").style.bottom =
(document.body.scrollTop * -1) + "px";
};
Hope this helps.
EDIT: I don't know if I made this clear - but you don't use your "wrapper" division to do this - you add another empty division, which get's placed behind the wrapper because of the CSS rules. So you'd have this on your page:
<div id="specialBackground"> </div>
<div id="wrapper">
...