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.
Related
I am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?
Here is my CSS code:
.carousel .item {
height: 900px;
background-color: #777;
}
.carousel-inner > .item > img {
display: block;
margin-left: auto;
margin-right: auto
}
Here is a URL to the webpage in question to show you that the image is too high: http://www.canninginc.co.nz/canluciddream/screenshots.html
EDIT
Ok, I have edited the code by changing the:
margin-top: 50px;
I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?
First of all make the .item position relative and then
on css:
.carousel-inner > .item > img {
position:absolute;
top:25%;
left:25%;
}
This will center the image vertically
Give margin top of 130px to the image and it looks cool!
margin-top: 130px;
Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;
If you can't put the image inside the main body, then add a negative margin-top to the main body.
Your problem is not the image being placed too high - it is fixed header. So set margin-top:50px instead of -80px for .myCarousel.
The reason the image is going behind the navigation bar at the top is because you have the navigation bar's position set to fixed. This removes it from the rest of the page for styling purposes, in that the other divs/elements do not recognize it when they position themselves. If you remove the position: fixed; css on that item, the other elements will position relative to that one. Another option would be to add enough of a top margin to the image element to push it down below the top bar by default, whichever you prefer.
Tried to make a floating div, with a -1 z-index to be in the background all the time, but when I make it's position absolute, then it disappears. Also want to place it in the middle with y-repeat image.
.perchament{
position:absolute;
margin:0 auto;
height:100%;
background: url("image_assets/parchment.png") repeat-y;
margin-top:25px;
z-index:-1;
}
It disappears because there is no content in it and no width specified.
Add this to your CSS:
left: 50%;
width: 100px;
margin-left: -50px;
The width needs to be set and the left margin is always half of that.
DEMO
As others have said, why not just do a background image on the body?
body {
background: url("image_assets/parchment.png") center repeat-y;
}
In this particular case, you'll need to add a width to your div (since it's absolutely positioned).
However, what's wrong with a background rule on the body element or something similar?
Absolutely positioning elements should us "top" and other such positioning controls instead of margin etc and set a width and height.
.perchament{
position:absolute;
top: 0;
left: 0;
width: 500px;
margin:0 auto;
height:100%;
background: url("image_assets/parchment.png") repeat-y;
margin-top:25px;
z-index:-1;
}
Does that help?
I'd also avoid using a minus z-index. Instead, you could set this item to z-index: 1 and then set the container above it (with everything else inside) to z-index: 2.
OR, if it's just a background image you want, you could simply put that onto the BODY tag of the document instead of a div. The BODY or HTML element is always the bottom of the stack.
I need to center images that will be wider than the parent div that contains them. the parent div is a fixed width and has the overflow set to hidden.
<div style='overflow:hidden; width:75px height:100px;'>
<img src='image.jpg' style='height:100px;' />
</div>
I must use an image as the child element because I need to resize the thumbnail dimensions and cannot rely on background-size since it is not supported on older versions of mobile safari which is a requirement. I also cannot use javascript for this, so it must be a css solution.
One more thing to note is that widths will vary between images, so I can't just use absolute positioning on the child element at a hard-coded offset.
Is this possible?
UPDATE:
for posterity, I've just found out that this can be accomplished on the older versions of mobile safari by using
-webkit-background-size:auto 100px;
of course, the background will be set as usual using 50% for left positioning. If you need this to work on another browser, the accepted solution is probably the best, but since this question was related to the iphone, this solution is a little cleaner.
How adverse are you to extra markup? Also, is there a max size for the images? For example, if your max image width is 225px then you could try:
<div class="frame">
<div>
<img src="image.jpg"/>
</div>
</div>
.frame {
overflow: hidden;
width: 75px;
height: 100px;
position: relative;
}
.frame > div {
position: absolute;
left: -5075px;
width: 10225px;
text-align: center;
}
.frame img {
height: 100px;
display: inline-block;
}
A fiddle example here: http://jsfiddle.net/brettwp/bW4xD/
Wouldn't using a background image still work? You shouldn't need to resize it.
Does something like this make sense? http://jsfiddle.net/QHRHP/44/
.container{
margin:0 auto;
width:400px;
border:2px solid #000;
height:250px;
background:url(http://placekitten.com/800/250) center top no-repeat;
}
Well if you know the width of the div and the width of the image, you can simply do some math.
Let's say the div is width 200px and the image is width 300px:
div.whatever {
width: 200px;
}
img.someImg {
left: -50px;
position: relative;
}
We know that since the width of the div is 200 pixes, then 100 pixels will be cropped from the image. If you want to center the image, then 50 pixels be hidden past the boundaries of the div on either side. Thus, we set the left position of the image to -50px.
Example (knowing the image size): http://jsfiddle.net/7YJCD/4/
Does that make sense?
If you don't know the image size or the div size, you can use javascript to detect these values and do the same thing.
Example (not knowing the image size, using jQuery javascript): http://jsfiddle.net/K2Rkg/1/
Just for reference, here's the original image.
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;
}
Live example of background issue: http://webid3.feckcorp.com/
As you can see the gray stripped background image flows over the bottom of the footer and leaves about 115 extra pixels below the footer. The div that contains the background image is <div id="home_page_back"> and is contained within the body element, both of which are set at a height of 100%.
I want the background image to hit the footer and then stop … not go any further past it. Can someone please advise?
Also - I do not want to place the image as a background of the body.
Cheers!
Copy of the CSS:
body {
margin: 0px;
padding: 0px;
height:100%;
background-color: #f3f3f3;
font-family: Arial;
font-size: 12px;
color: #333333;
}
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
display: block;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
I think it's the way you structured your markup, actually. Place the content below
<div id="home_page_back" style="display: block;"></div>
inside of it, remove the 100% height rule and replace it with overflow:hidden. The content will expand that div out to see the background image. As it stands now, you've made it a separate, absolutely positioned div and given it 100% height, which makes it at big as the background image you have inside it, and it expands beyond any of the content coming after it because that content now ignores it in the layout (because it's positioned absolutely.) At least that's the theory I'm going with :)
If you want the height 100% to work like that, give the body element 100% height, and the html element also 100% height.
Add overflow: hidden; to your body css.
And please, try validating your html before doing anything else and before looking for help.
#feck; may you have want an sticky footer check this answer .
Use:
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
padding-bottom: 30px;
}
Wrap "home_page_back" div around "content" div in the html instead.
Remove margin-top from #footer css.
Then, if you want it, you can add the space after the footer.