My website has the following CSS making an image stick to the bottom of the site.
#wrapper{
min-height:100%;
background:#fff url(grafikk/bg-footer.gif) no-repeat 50% 100%;
width:100%;
overflow:hidden;
}
It words great - the picture is centered and stick to the bottom of the page.
But I'd like to set the picture width to 50% of the original PNG. The PNG is 640px wide, so setting it to 320px is also ok.
How could I do that?
(I was unable to find what the different properties of the background-setting actually mean.)
You can actually use pixel values in background-size:
background-size: 320px 100%;
I believe the property you're looking for is the background-size. More info here: http://www.w3schools.com/cssref/css3_pr_background-size.asp
Related
My image: http://path.com.my/v2/wp-content/uploads/2016/05/Home-Page-Banner-B.jpg
Website: http://path.com.my/v2/
Check 2nd slide
The slider image, no matter what resolution of images I put in, it will still 'zooming' in too much in the center and cut off too much details. Changing the the image aspect ratio doesn't seem to do any good either.
I have try to use background-size: cover, but it would leave blank spaces on the side, and doesn't do any good in different screen sizes too.
Any idea on how to best achieve this so I can put in my image with the least crop or zoom in?
Try the following:
.home #content .slide {
/*[...]*/
background-attachment: fixed;
background-size: 87%;
background-position: 250px 0;
}
This is my page http://inogroup.it/preload/index.htm
Width of image boxes is responsive
How to set the height to be responsive too? Like 50% of the screen?
If I do this change:
.pattern{
background-size: contain;
margin-bottom:25px;
width:100%;
height:50%;
}
it's not working
Thank you very much!
background-size: needs to come AFTER background: I don't know if this is true of all browsers, but it's certainly a feature of Chrome that can drive you crazy.
This might be a bit late but in some cases it's necessary to add background-attachment: fixed; to get background-size: cover; working.
You need to use background-image property to define background image.
So this won't work
<img class="image" style="background: url(image.jpg);" />
.image { background-size: cover; }
because background is the shorthand code and takes default values for all omitted parameters.
But if you do this
<img class="image" style="background-image: url(image.jpg);" />
.image { background-size: cover; }
This wil solve the problem.
The height of the div can be set using css height property, or (by default) by the height of it's children elements. As the images are being set as background images the div is unable to determine the height it should be from that, and there is no pure css method of adjusting the height of a div to fit the dimensions of a background image. What you can do, is set the background images to be positioned in the centre of the div and have the background size as cover:
.pattern-container .pattern {
background-size: cover;
background-position: 50% 50%;
<!-- other rules here -->
}
Positioning the background images as 50% 50% vertically and horizontally centres it in the containing div regardless of the dimensions of the div. That said, the image itself may crop at the edges if the aspect ratio of the div is less than the aspect ratio of the image (e.g. if the div is 30px wide and 10px high, and the image is 40px wide and 10px high, then the image is going to lose 5px from both sides).
You can use ;
background: url('/path');
background-size: cover;
//in the style sheets
In some cases, there may be empty space in the edges of your image itself (e.g., an icon that is surrounded by 16px of blank white space on each side) making it seem like background-size: cover; is not working when it actually is.
Just a reminder to double-check your source image :)
The image boxes are responsive, but this does not mean that the corresponding images are. For a more fluid and dynamic structure, I recommend using a framework that does the work for you, like Bootstrap.
In the latest version of Bootstrap you could use the following code to make a responsive image (both in width and height):
<img src="images/my_img" class="img-responsive" />
In order for this to work, you will need to download the latest version of Bootstrap from their website (http://getbootstrap.com/) and reference in your code.
I've searched for hours upon hours and now I figure it's time for me to ask the question. I can't get my background image that is placed in my header to fit to screen. It works for every kind of computer resolution fine, but where I run into trouble is when I am viewing on a phone, it doesn't want to shrink. I've done min-height, max-height, I've tried everything, the problem partly I think is that the header div itself is smaller than this image, but I also don't really know and need some guidance, i'm relatively new to the CSS scene.
Here is what I have:
#header {
background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 209px;
}
Website url is http://hamsoc.polymath.io
Thank you for your help in advance!
Duncan Beattie gave me the answer and it worked like a charm. Here is what he said:
"You have background-size: cover which is fitting the height of the
background image to the fixed height of your div, 209px. remove the
fixed height and replace with padding-bottom:15% this will kep the
aspect ratio of the div the same and scale the image as viewport gets
smaller."
You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px.
remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller.
I would suggest having the header image in your HTML rather than a background image and then setting a max-width like so:
#header img{
max-width: 100%;
height: auto;
}
This will also allow you to make the image "clickable" which is generally wanted in a header logo.
DEMO FIDDLE
FULLSCREEN
Have you used the a precentage to set the height of the image in the div?
So set the image height to be say 100% of the div?
If not then maybe you could use some javascript code to detect whether they are on a mobile device, and set the height of it accordingly?
The hard coded height value is messing you up. Try playing with the height: 290px value and watch the header fit properly on smaller screens.
Instead of a background image, you can try putting the image in the html and using a CSS property to help the content scale down on smaller screens.
img {
max-width: 100%;
}
So I have a div with a background image. I would like the background image to always be 100% on the screen no matter what the screen size is. I would like the image to grow in proportion but crop the height. I don't want the image to stretch. What I have so far is:
#banner {
background:url(../images/blurry.jpg) no-repeat;
width:100%;
height:520px;
background-size:100% 100%;
}
At the moment this is stretching the image to 100% and making the image look stretched.
Can anyone help me with this or point me in the right direction?
Use the CSS3 background-size property. Set it to cover. Like so:
background-size: cover;
Note that only IE9 and later supports this property value. IE8 will complain about an unsupported value. Chrome and Firefox supported cover since the past couple of years at least.
in the header menu i am using an image with repeat-x property. it works perfectly in full screen however in low resolution i.e in 1024X768 and 800X600 screen it leaves some margin. it leaves the margin when a horizontal scroll takes place. how do i make sure even if horizontal scroll exist the repeat-x property should cover the area of the scroll. is there any css property for this?
the css for this i am using is.
#header {
height: 111px;
background: url('../img/header-bg.jpg') repeat-x;
width: 100%;
}
let me know if you want more code ill host it in jsfiddle. thank you.
i have hosted my site in http://iarmar.com/test/bn just in case you want to test.
Set min-width: 1040px; to your #header
As expalined in my comment (and by Jeaffrey), set your #header with a min-width or use 100%.
See this www.viralment.com oh its says 30 at least
try using these:
background-image: url("gradient_bg.png");
background-repeat: repeat-x;