So I'm looking to add a footer to my page but I want it to be a background-image that is automatically resized depending on the monitor resolution and have it with a 100% width and height but to never overflow to the sides, so I don't want scrollbars to appear. The image is .jpg.
Would appreciate some input as to what is the best way to go around this
Use the following CSS
div {
width: 100%;
height: 400px;
background-image: url(your-path-here.jpg);
background-size: 100% 100%;
}
And see this live example
Be careful, if you don't resize the height of your footer as well, that will stretch the image.
background-size will do the trick, but note that it' not supported by IE8 and older. Just to be on the safe side for these browsers, the image could be positioned in the center (that means at 50% horizontally and 50% vertically - of course, the center keyword also works)
Live demo: http://dabblet.com/gist/2790711
Related
I'm trying to add a responsive image to a front page that expands to the full width of the page. Similar to what many sliders do, but I only have one image so a slider is overkill. I've set up a div and set it's background image and background-size to 100% and that achieves the width. My problem is the height. I have to use a fixed height in order for the div to appear. I've tried setting height to auto, but then I don't get an image. I tried using this method:
How can I resize an image dynamically with CSS as the browser width/height changes?
but I can't seem to get the width to scale correctly. Using a fix height works fine until the browser window expands past the size of the image, and then it starts to cut off. Any thoughts on how I can make the height scale dynamically just as the width? Any thoughts would be greatly appreciated!
My code:
CSS:
.banner {
max-width: 100%;
height: 720px;
background: url(../images/homepagebanner.jpg) no-repeat left top;
background-size: 100%;
}
HTML5:
<div class="banner"></div>
I am using bootstrap, but this is outside of a container so it shouldn't be affecting this piece of code.
EDIT Here's the codepen:
http://cdpn.io/xLvzA
Have you tried setting the height of html to 100%, then setting the height of your banner to 100%? Adding a codepen demo to show your exact issue might help a bit better to help vizualize the exact problem you're having
Here's what I have: 800px width div's inside a 100% width container with a background image repeating horizontally.
Live: http://www.baskra.com
When I resize the browser window, a scroll bar is generated. When I scroll it, I see that the background image is only applied to the original unscrolled region, as seen above.
How can I solve this problem?
JSFiddle: http://jsfiddle.net/wcdXK (Not every image is working, but I believe the most important here is the CSS.)
You should replace the "width: 100%" from .pages-container CSS class with a "min-width: 800px" – it will force background to be the same width as the container if the window size becomes less than 800px.
.pages-container {
background-attachment: scroll;
background-image: url('http://baskra.com/images/bg/bg-scroll.png');
background-repeat: repeat;
min-width: 800px;
left: 0;
}
Check it here : http://jsfiddle.net/wcdXK/3/
Because the width applies to the area of the containing block, as the overall container is smaller the background shrinks to apply to the same area (along with the pages-container element).
I noticed you are experiencing many problems on your layout (you posted a similar question)
You should read a Responsive Web Design article trying to understand media queries
like this (random picked from google) http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
I have a div that is 200px by 200px.
It's background image is 500px x 500px.
Is there a way to make sure the entire background image fits into the div? I know you can size it with CSS3 but i'm looking for a solution for older browsers.
Thanks
Is there a way to make sure the entire background image fits into the div?
The background-size property.
I know you can size it with CSS3 but i'm looking for a solution for older browsers.
There is no other standard way to scale a background image.
Older versions of Internet Explorer can be supported via the non-standard filter property and AlphaImageLoader.
/* Untested */
background-image: url(images/someimage.png);
background-resize: cover;
filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
Alternatively, as a hack, you could use an <img> element, and absolutely position it behind the content. This would be a content image though, so it wouldn't be a clean hack.
Suppose that your div has id equal to "myid" .
picture used has as size 500x500
Demo :http://jsfiddle.net/abdennour/rhPDx/
div#myid{
width: 200px;
height:200px;
background: url('http://px6.streetfire.net/0001/72/25/1952752_600.jpg')
0% 0%
no-repeat;
background-size: 200px 200px;
}
You can achieve the same by applying background-size:100% 100%; to your div
Hope it will help
You cant resize ur image in backgound image attribute.
There's an other, tricky way to do this. Just place your background image in your div and add absolute position to it. Ofc ur div need to have a relative postion attribute.
After this you can resize ur image, simply with css2.
Here is an example of how I am currently implementing this functionality:
EXAMPLE
The content div can change in height dynamically when items are added or removed so I need the gradient to move with it. This works great in desktop browsers... However when you view it on an iPad and scroll down (moving the entire body up) it looks strange because of the position:fixed on the gradient div. Note that this is only a problem when the content div is smaller than the viewport. If the content div is larger than the viewport it pushes the gradient out of view and works great.
Is there any way to prevent the iPad from moving the body around like that or is there a better way to implement this functionality without using position: fixed?
Thanks!
Can you explain a bit more what looks wrong on the iPad, I don't have one with me. Also, I removed the position: fixed; and the functionality didn't change on chrome. position static and relative work the same for me.
I abandoned the gradient div and instead set a min-height on the content div with a background image of the gradient with the following properties:
#content {
min-height: 200px;
background-color: white;
background-image: url(../Images/content-background.png);
background-position: center bottom;
background-repeat: repeat-x;
}
My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:
html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}
I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.
This is only happening in FF.
Does anybody know of a workaround?
Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.
I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.
Setting padding:0px 0px 0px 1px; fixes the problem for IE.
Carlo Capocasa, Travian Games
The (most) common problem is that your background image has an odd number while your container is an even number.
I have wrote an article in my best English about where I also explain how the browser positioned your picture: check it out here.
I was able to resolve this with jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
I had the same problem.
To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.
Let me know if it works for you.
What about creating a wrapper div with the same background-image.
body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }
The wrapper has an even number, the background will keep the same position on any screen size.