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.
Related
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:
I am trying to integrate a hover effect to an img in css but the problem occurs when I hover it, the hover area is misplaced and the the hover effect occur even when the mouse is not over the img.
<body>
<div id='backgroundContainer'>
<div id='background31'></div>
</div>
</body>
CSS:
html, body {
max-height:100%;
width: 300%;
background: url('background.png');
top: 0;
left: 0;
background-size: cover;
background-repeat:no-repeat;
}
#backgroundContainer {
top:0;
left:0;
margin:0;
padding:0;
height:100%;
width:100%;
}
#background31 {
top:45%;
position: absolute;
margin:0;
padding:0;
background: url('alure.png');
background-repeat:no-repeat;
height:55%;
width:70%;
left:230%;
background-size: 5%;
}
#background31:hover{
background-size: 7%;
}
I was thinking about using background-position:x% y% or margin-left to simplify the code but it did not work what I tried.
You are applying the hover effect on an div which is set to a large area (the area in red in my fiddle below). This is why the hover is activated even when the mouse is not over the image.
If you add an image to the nested div, and apply the hover effect to this image it should work.
<div id='backgroundContainer'>
<div id='background31'>
<img src='http://www.sjiep.nl/images/sjiep.gif' id='testImage'>
</div>
</div>
and the css
#testImage{
width: 100px
}
#testImage:hover{
width: 150px;
}
See also: http://jsfiddle.net/2CbTX/1/
Update
Added a link to the image, see: http://jsfiddle.net/2CbTX/2/
because you have put the hover for the div the whole div , not just the image and this div background31 occupies the lower right corner square of your window .
see here : http://jsfiddle.net/Pda5e/
your image size becomes very small as compared to the div in which it is in. Since you have made it 5% of the div.
Resize the div to make it smaller and increase the background size to fill the div
so if you have to make the hover only affect the image, you must give the hover to image only.
like here : http://jsfiddle.net/Pda5e/1/
Try replacing this code
#background31{
background: url(maxresdefault.jpg);
background-repeat:no-repeat;
height:50px;
width:100px;
background-color:#066;
background-size: 5%;
}
#background31:hover{
background-size: 100%;
}
The hover effect occurs not over the image because you only change background-size, but not the size of #background31 element, it always remains width:70%.
So you should use background-size: 100% and change the width of the background31 element.
#background31 {
background-size: 100%;
width: 5%
}
#background31:hover{
width: 2%;
}
But background-size is not supported in IE8. If you want IE8 suuport than use <img> element instead of a div.
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 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.
When we include an image in a web page with the following code
<html><body>
<img src="http://www.example.com/abc.jpg">
</body></html>
The browsers render it so that there is a margin of few pixels to the left and the top. I want the image to stick to the the left and top borders.
Help needed with that.
Thanks
You have several options:
Use a CSS reset. Simple example:
* { padding: 0; margin: 0; }
Use position: absolute; to "forcefully" put the image wherever you want it to be (can be controlled with top, right, bottom and left.
Those are the body's margins.
I always use this styling in my css file:
html, body { margin: 0px; padding: 0px; border: none; }
or you can write it inline, in your case:
<body style="margin:0px; padding:0px;">
Try this with CSS
<img src="http://www.example.com/abc.jpg" class="left-image">
html, body, img{
padding:0px;
margin:0px;
}
img.left-image{
float:left; /* it may require if you have more elements in same container, not always */
}
or you can always position, example if you want 10px from top and 10px from left
img.left-image{
position:absolute;
left:10px;
top:10px;
}