When I test this about 30% of the lower part of the image is being positioned at top right.
I can't understand why.
If I for example positioned top left or top right it works fine.
It never works if I give positioned as in this example bottom right or bottom left.
If I give positioned bottom left then again about 30% of the lower part is being positioned at top left.
Here is the complete markup and css
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
body
{
background-image:url(uppsala.jpg);
background-position: bottom right;
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>
The image is at the bottom right of the body element, but the problem is that the element isn't as tall as you think it is so it looks like it's in the wrong place.
Add this to the CSS rules:
body, html {
min-height:100%;
}
You should declare height in css rule
body,html
{
background-image:url(uppsala.jpg);
background-position: bottom right;
background-repeat:no-repeat;
height:100%;
}
Related
UPDATE
Margin for html and body needed to be 0 to fill page completely.
END UPDATE
*UPDATE*
I have fixed using the below suggestion of adding the height property to the html and body tags. Now there is a slight scroll down required to view the entire page. Ideas on why this is happening?
END UPDATE
I am using CSS to make a div fill the screen as needed. I've got width and height set to 100%, but the div doesn't fill the height of the screen. Is this a known issue with IE7 or am I possibly just missing something? Code below.
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>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="divy"></div>
</body>
</html>
CSS
#divy
{
width:100%;
height:100%;
background-color:Blue;
}
The issues is the container must have height of 100% for it's child element to assume 100%...
In this case the container is <html> -> <body> so a quick fix would be
html, body {
margin: 0;
padding: 0;
}
html, body, #divy {
width:100%;
height:100%;
}
The element fills the height of the body element, which can be smaller than the browser window.
Set the height of the html and body elements, so that they fill the window:
html, body { height: 100%; }
Whenever you are defining a 100% height, it's ancestors or all subsequest ancestor, must have 100% as their height as well.
So, give 100% height, to the body, as well as html.
html, body { height: 100%; }
You can manage this issue with jQuery:
jQuery('.yourDiv').height(jQuery('body').height());
basically i'm trying to set a footer to the center but when i zoom in / out it moves
this is my code:
div#footer {
font-size:16px;
text-align:center;
position:absolute;
bottom:0;
}
You could try setting either the margins or padding for both the left and right to :50%
You could try positioning your footer absolutely relative this is useful css trick for positioning page elements and making then stay where you put them no matter what.
Basically what you want to do is wrap your footer in a relatively positioned div then make that div 100% wide then absolutely position your footer inside the relatively positioned div, this should make your footer stay exactly in the centre of the screen no matter how the screen size changes.
As this concept is a little abstract to explain I've created some simple demo code to demonstrate what you will see is a pink box positioned in the exact centre of a blue box and no matter how you change the screen side the pink box always stays in the centre of the screen you can zoom in or out you can change the size of the window it doesn't matter hope this helps.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<title>absolutely relative positioning demo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.wraper
{
height:200px;
width:100%;
position:relative;
background-color:blue
}
div.content
{
height:100px;
width:100px;
background-color:pink;
position:absolute;
left:50%;
top:50px;
margin-left:-50px
}
</style>
</head>
<body>
<div class="wraper">
<div class="content"></div>
</div>
</body>
</html>
#data-wrapper {
background:url("../images/repeat-bg.png") repeat-y 0 46px transparent;}
I want to start repeat-bg.png as a repeat-y but after 46px area from top of #data-wrapper. Is it possible to do like this?
You mean so that the top 46 Pixels have no background image?
No, that's not possible, sorry. You'll have to work around it, e.g. using another div with a margin.
You need to apply the background image to a containing div with 46px margin.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
#container {
background:url("../images/repeat-bg.png") repeat-y; margin-top:46px; height:600px;}
/* height:600px is only critical to the demo code and can be removed once the page has content */
</style>
</head>
<body>
<div id="container">
<!--All of your content goes here-->
</div>
</body>
</html>
In addition to this method, if support for this is not critical, you could be forward thinking and adopt the currently very under-supported CSS3 multiple-background declaration.
body {background:url("bg1.png") top no-repeat, url("bg2.png") bottom repeat-y;}
I want to have a 2 column layout, and have the left column able to be 200 px at first, and have a "shrink" button to shrink it down to 10px, and have the right column expand to fill all the rest of the available space. Then if they click on the "show" button (which will be all they see in the now 10px wide left column) have the left grow back to 200px and have the right column shrink by that amount.
I can't figure out how to make the right column grown and shrink without knowing the exact width of the window.
I hope this makes sense, and I really hope someone can point me in the right direction.
Browser requirements are IE8, FF3.6, Safari, and Chrome, so in theory I can use some advanced CSS techniques. At least I don't have to support IE6.
If you float your left column (float: left;) with variably a width of either 10 or 200px, and simply add overflow: hidden; to the styles of the right column, the right column will expand and contract to fill the space, whatever the site of the left column is.
Something like this should do the trick:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css" media="screen">
html, body { height:100%;}
#container { overflow:hidden; height:100%; }
#sub-content { background:yellow; float:left; height:100%; width:200px; }
#main-content { background:red; height:100%;}
#container .shrink { width:10px; }
</style>
</head>
<body>
<div id="container">
<div id="sub-content">
Sub content
<a id="toggler" href="#">Toggle</a>
</div>
<div id="main-content">
Main content
</div>
</div>
</body>
<script type="text/javascript">
var link = document.getElementById('toggler');
link.onclick = function() {
var subContent = document.getElementById('sub-content');
if (subContent.className == 'shrink') {
subContent.className = '';
} else {
subContent.className = 'shrink';
}
return false;
}
</script>
</html>
it would help if you put your sample on http://jsbin.com/, but try the following:
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}
and then make the right column width 100%.
Is this what your are looking for?: http://jsbin.com/uweqe3
Working on a site that is just HTML and CSS. I am quite new with this. I have a header, body and footer that I would like to repeat to fill up the page. Think envato.com.
Here is some sample code I have so far.
CSS:
.blkside {
z-index:99;
background-image: url(/images/blkside.jpg);
background-repeat: repeat-x;
top:0px;
right:85px;
position: absolute;
}
the corresponding HTML:
<div class="blkside"><img src="/images/blkside.jpg"></div>
This is just one of the divs that I have. 3 repeat horizontally, and 1 repeats vertically. From my searching, this all looks correct code wise, but does not show up right. Any help would be much appreciated.
simple example below.
<div class="repeat"></div>
.repeat {
background:url(/images/blkside.jpg) top left repeat-x;
height:200px;
}
You need set measurements on the div (height/width) and once you define the image in the css you do not need to put it in the html as well
The code to repeat an image on the whole page background is:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
body
{
background-image:
url(full link to your image goes here);
background-repeat: repeat-xy;
}
</style>
</head>
<body>
</body>
</html>