i need this kind of effect in my project. there is a left corner floating red color strip. but i want to implement it for image using css. Please refer below image
http://www.w3.org/TR/xhtml2/mod-tables.html#sec_26.6.1.
you can use position:fixed; for a div.
Example code
css
#redBar {width:40px; height:200px; position:fixed; background:red;}
html
<div id="redBar"></div>
Demo http://jsbin.com/aqofa5
You can modify the background property to add your custom background image like background:url("the-path-for-the-image").
It is called fixed position. Here is css that accomplishes this:
.element { position:fixed; top:2%; right:2%;}
More info.
You can use a positioned div:
#myImgDiv
{
position: fixed;
top: 0;
left: 0;
background-image: url(path/to-img.png);
}
If it's an image related to content, it's best to use an <img> tag with an alt attribute within this div.
Let's say this is you DIV
<div id="alwaysThere"><img src="..."></div>
This should be CSS style:
#alwaysThere
{
position: fixed; /* or absolute if you want it to be fixed page top-left */
top: 0;
left: 0;
}
Use fixed position when you want your image to stay there regardless of page scrolling and absolute when you want it to stay top left on your page which means it will scroll when you'll scroll the page down.
The example you provided with a link uses fixed hence it stays there regardless of scrolling.
Pretty easy to be done, do the following:
div#divID
{
position:fixed;
top:0px;
left:0px;
}
This will give you the effect that this div will never leave the visible area of the browser.
Other position values are:
Static -- default
Absolute -- absolute in terms of the page, not the browser window
Relative -- relative to what it would be if the position was static
This is already an image. It doesn't use a floating div.
This CSS is used for the body:
background-image: url(http://www.w3.org/StyleSheets/TR/logo-ED);
background: white;
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;
Related
I can't seem to get the Leaflet full screen plugin to work appropriately in Google Chrome when I set the CSS position property for the map div.
Here's a JS Bin to demonstrate my problem.
See the code:
#map { position:absolute; top:100px; bottom:50px; width:100%; }
On Firefox and IE, the map correctly goes to full screen (i.e. expands beyond the dimensions of the map div), but on Chrome, the full screen gets constrained by the top and bottom properties of the map div.
Any ideas on how to overcome this problem?
Thanks!
Eli
Edited 8/14/14: Thanks #FranceImage for the great answer, which worked like a charm. I'm still learning CSS and thus I'm sure there are always better ways to do things than I have done. For example, I'm not sure how to use the float property to achieve the same effect that I have with position: absolute on my page here.
How do I change the following code to use the float property instead of position: absolute to achieve the desired effect of having my map NOT overlap the header and sidebar? Thank you!
#map2 {
height: 100%;
width: 100%;
}
#mapcontain {
position: absolute;
top: 125px;
bottom: 50px;
left: 16%;
right: 0;
width: 100%;
}
For the plugin to work, you can't change the following
#map { position:absolute; top:0; bottom:0; width:100%; }
You will have to wrap the in a container (another div) where you will apply your positioning css
<div id="content">
<div id="map"></div>
</div>
Note: I would not use absolute positioning for a page layout.
Absolute position benefit is that the element is taken out of the normal flow and can cover other elements. It is usually used for dialog boxes and popups.
Go for float position.
I've created a JSFiddle here:
http://jsfiddle.net/AsHW6/
What I'm attempting to do is get the down_arrow.png's centered in their containing divs. I was able to center the up_arrow.png's using auto margins. I'm using the fixed property to use them as footers, as I want them to be at the bottom of the div regardless of resolution.
My question is what is the best way to center a bottom fixed image within the width of its containing div?
Some code from the fiddle (I'm having trouble with the StackOverflow formatting):
.scroll-arrow-down {
position: fixed;
bottom:0;
}
I should add that I don't care about IE hacks/workarounds at all, this application will not be targeting IE in any way.
Any comments and answers are appreciated.
If you used fixed position it will be fixed to the viewport (which I don't think you want). Using absolute positioning will position the images in reference to the item that contains them.
I added a left:45%; which pretty much centers things, but depending on the width of your arrows that may need to be updated.
.scroll-arrow-down {
position: absolute;
bottom:0;
left: 45%;
}
http://jsfiddle.net/AsHW6/1/
You can wrap the arrow-down images in a div that gets aligned to the bottom. The div can then be set to have its content centered.
Wrapping in HTML:
<div id="list1">
<img src="image/up_arrow.png" class="scroll-arrow-up">
<p class="list-title" id="list-title1">Autonomous Behaviors</p>
<div class=".scroll-arrow-down">
<img src="image/down_arrow.png">
</div>
</div>
and the css:
.scroll-arrow-down {
position: absolute;
bottom: 0;
background-color: red;
width: 100%;
text-align: center;
}
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block
putting image always in center page(E.x image loading for ajax call), even when move scroll. how is it?
For most browsers, you can use position:fixed
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
If the image was, for instance, 40x30 pixels, you'd set margin-left:-20px; margin-top:-15px instead.
Here's a jsfiddle example: http://jsfiddle.net/WnSnj/1/
Please note that position:fixed doesn't work exactly the same in all browsers (though it's ok in all the modern ones). See: http://www.quirksmode.org/css/position.html
<style>
.CenterScreen{
position:fixed;
/*element can move on the screen (only screen, not page)*/
left:50%;top:50%;
/*set the top left corner of the element on the center of the screen*/
transform:translate(-50%,-50%);}
/*reposition element center with screen center*/
z-index:10000;
/*actually, this number is the count of the elements of page plus 1 :)*/
/*if you need that holds the element top of the others. */
</style>
If you add this class your element, it will be always center of the screen.
For example:
Hello world
This might help you : http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/
Put the image in a div tag with some class name (centeredImage) and use the following css
div.centeredImage {
margin: 0px auto;
position: fixed;
top: 100px;//whatever you want to set top;
}
I have a footer div with 100% width. It's about 50px high, depending on its content.
Is it possible to give that #footer a background image that kind of overflows this div?
The image is about 800x600px, and I want it to be positioned in the left bottom corner of the footer. It should work sort of like a background image for my website, but I've already set a background image on my body. I need another image positioned at the bottom left corner of my website and the #footer div would be perfect for that.
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}
The image is set to the footer, however it doesn't overflow the div. Is it possible to make that happen?
overflow:visible doesn't do the job!
There is a very easy trick. Set padding of that div to a positive number and margin to negative
#wrapper {
background: url(xxx.jpeg);
padding-left: 10px;
margin-left: -10px;
}
I do not believe that you can make a background image overflow its div. Images placed in Image tags can overflow their parent div, but background images are limited by the div for which they are the background.
You can use a css3 psuedo element (:before and/or :after) as shown in this article
https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/
Good Luck...
No, you can't.
But as a solid workaround, I would suggest to classify that first div as position:relative and use div::before to create an underlying element containing your image. Classified as position:absolute you can move it anywhere relative to your initial div.
Don't forget to add content to that new element. Here's some example:
div {
position: relative;
}
div::before {
content: ""; /* empty but necessary */
position: absolute;
background: ...
}
Note: if you want it to be 'on top' of the parent div, use div::after instead.
Using background-size cover worked for me.
#footer {
background-color: #eee;
background-image: url(images/bodybgbottomleft.png);
background-repeat: no-repeat;
background-size: cover;
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
}
Obviously be aware of support issues, check Can I Use: http://caniuse.com/#search=background-size
Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -10px;
<div class="home-hero">
<div class="home-hero__img"></div>
</div>
.home-hero__img{
position:relative;
top:-10px;
transform: scale(1.1);
background: {
size: contain;
image: url('image.svg');
}
}
You mention already having a background image on body.
You could set that background image on html, and the new one on body. This will of course depend upon your layout, but you wouldn't need to use your footer for it.
Not really - the background image is bounded by the element it's applied to, and the overflow properties only apply to the content (i.e. markup) within an element.
You can add another div into your footer div and apply the background image to that, though, and have that overflow instead.
This could help.
It requires the footer height to be a fixed number. Basically, you have a div inside the footer div with it's normal content, with position: absolute, and then the image with position: relative, a negative z-index so it stays "below" everything, and a negative top value of the footer's height minus the image height (in my example, 50px - 600px = -550px). Tested in Chrome 8, FireFox 3.6 and IE 9.