Where does this space after my background image come frome? (red line in image shows spacing)
The background image does not have this space, it end where the black color ends...
#menu{
width:300px;
margin: 0;
padding: 0;
background:url(../img/menuBackground.png) right no-repeat;
color:rgba(255,255,255,1.00);
}
It should go nicely and completly to the right side of the div...
try changing top: right: and height: to see what you come up with also add position fixed unless you have this somewhere else, i don't know where the rest of your code is.
#menu
position:fixed;
top:0px; /*maybe try positioning it fixed where you want it*/
right:0px; /*same here or left:0;*/
width:300px;
height:250px; /*you could also try using height*/
margin: 0;
padding: 0;
background:url(../img/menuBackground.png) right no-repeat;
color:rgba(255,255,255,1.00);
}
It was me who was confused:
This solved it:
background:url(../img/menuBackground.jpg) right top no-repeat;
Because only the middle of the image was shown, it looked as if there was spacing:
Related
I am trying to put a gray bar on the bottom of the screen of my webpage, regardless of the resolution. However, when I try, it seems to just go up or down when I go in a different resolution. Is there any way to fix this?
Also, the bar is made out of CSS using the div id tag.
/* HTML*/
<div id="info">Scroll for info</div>
/* CSS */
<style>
#info {
height: 40px;
position: relative;
margin-top: 25%;
background-color: #393838;
opacity:
}
</style>
EDIT: I want it to be on the bottom of the screen, but then when I scroll down it goes up towards the top of my screen.
If you want it on the bottom and always at the bottom, you have to use position: fixed.
You could try this:
#info {
height: 40px;
position: fixed;
bottom:0%;
width:100%;
background-color: #393838;
opacity: 1;
}
http://jsfiddle.net/rX4nd/1/
How about adding entering as well?
.someDiv {
position:fixed;
width:50%;
height:300px;
margin-left:-25%;
background:#063;
bottom:0px;
left:50%;
}
Here is some Documentation that should help you with what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
Tl;dr, set "position: fixed" to place it at the bottom of the rendered part of the parent.
I have this css, now it looks like a want it to in my 1366x768 laptop screen, it appears at the centre of the screen at the bottom. But when I move it to my larger screen, the footer appears in a different position, further up the page.
Can anyone give me some suggestions please?
position:relative;
width:900px;
height:70px;
background-color:#0CF;
margin-top:38%;
right:25%;
left:50%;
margin-left:-450px;
This is why:
margin-top:38%;
38% of any different screen height will result in a different position for your footer, assuming it is position relative to the body and not to another element that may have another position. In your case I would be willing to bet it is relative to the body.
If you change that to position absolute, then give it a bottom value it will stick to the bottom of the screen.
position:absolute;
width:900px;
height:70px;
background-color:#0CF;
bottom:0;
right:25%;
left:50%;
margin-left:-450px;
If you do
position: absolute;
margin-right: auto;
margin-left: auto;
with the width that you already have, that should centre it. Then
bottom: 0;
should put it at the bottom of the screen. Then you can get rid of left, right, margin-top.
[edit] The finished thing would look like this
position: absolute;
width: 900px;
height: 70px;
background-color: #0CF;
margin-left: auto;
margin-right: auto;
bottom: 0;
I am trying to make a footer/navigation fixed to the bottom right corner of the screen so when you scroll down it will always be visible, and when you pull the bottom right of the browser to make it bigger it will stay fixed in the corner. I would also like it to scale smaller when you make the browser smaller. I've figured a way to do this in the top left corner but not the right.
I have tried
position:fixed;
bottom:0;
right:0:
however this doesn't seem to be working. I am left with a mysterious space between the edge of the page and my image (http://i.imgur.com/FZoaLd0.jpg) (doing a negative margin on the div does not erase this space) I also do not want to affix this as a background image because I eventually want to make it an image map.
sorry if this is confusing! I am still a newb at this.
<div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>
is the width and height the culprit of the space? if so how would i fix that? just create the image in the exact size i need it to be?
First, you need a fixed position, if you don't want it to move while scrolling.
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
width:75%;
}
#footer img {width:100%;}
And to clear the margins :
html, body {
margin:0;
padding:0;
}
Be careful, the position:fixed, unfortunatly doesn't work with safari on iOS (iPhones, iPads...)
You can see a demo here.
Edit
Another solution is to put the img in background of the footer, like this example :
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
width:75%;
height:75%;
background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right;
background-size:100%;
}
Position absolute will move with scroll. What you need is positon:fixed;
#footer {
position:fixed;
bottom:0;
right:0:
}
You need position: fixed;.
You also might want to try clearing the body and HTML margins:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
Is it withing any parent containers that have position set to position: relative;?
Use
position:fixed;
Instead of absolute.
Fixed will keep it always at the bottom right of the window.
Absolute changes as you scroll.
HTML:
<div class="class-name">
<img src="images/image-name.png">
</div>
CSS:
div.class-name {
position: fixed;
margin-top: -50px;
top: 100%;
left: 100%;
margin-left: -120px;
z-index: 11000;
}
div.class-name img{
width: 100px;
}
Change margin-top according to your image height.
The image of the young lady on the following page:
http://secretgenius.co.uk/document/document_index.html
needs to move to the bottom of the page if the content to the right is longer. You can see in the above URL that she is floating above the footer line, but I would like her to always appear on the footer line no matter how much content is to the right. I am using the 960.gs grid for this site.
Thanks for any help.
Use position:relative on the image parent container, and position:absolute; bottom:0; left:0 on the image
Add vertical-align: bottom on the img tag
Screenshot:
#mainFooter{ background: url(../images/footerbg.png) repeat-x left bottom; bottom:0px; width: 100%; position:fixed; }
#footer { position: relative; margin: 0 auto; padding:10px 0; }
try these settings & if any prior settings of css.
mainFooter: for img
& footer: for text bellow img
I'm trying to get a background tile for a certain position, like so:
I have the following CSS and dummy div under the body tag.
div#dummy {
position: absolute;
top: 200px;
bottom: 0;
left: 0;
right: 0;
background-image: url("data:image/png;base64....");
}
However this doesn't reach the bottom despite specifying bottom 0. Any ideas? I think I may be going about this the wrong way.
You might want to make sure you are including a reset.css http://meyerweb.com/eric/tools/css/reset/
You can then try setting the background property of the body itself, setting the position like so:
background: blue url('myimage.png') no-repeat left bottom;
The "blue" at the start specifies the colour of the top part of the image. The two properties at the end specify the background "position". Specifying bottom should make it glue to the bottom.
Then the height of the background image itself will determine how far up the tile it comes. You can use repeat-x instead of no-repeat if you want the background to tile horizontally..
One of many ways no doubt.
it should work-
html, body
{
margin:0;
padding:0;
width:100%;
height:100%;
}
#bluePart
{
height:30%;
width:100%;
background:#2A3BA6;
border:solid 0px #000000;
}
#lowerTilePart
{
height:70%;
width:100%;
background-image:url(images/bgImage.gif);
background-repeat:repeat;
border:solid 0px #FF0000;
}
the css style for html, body part is must.