How can I get the image to shrink when the size of the window gets smaller without making the image stretched funny. I want the size of the image to auto adjust to make it look normal at all sizes.
.frontpage{
background: url('https://static.pexels.com/photos/168/apple-iphone-laptop-notebook.jpg');
background-size: 100% 100%;
min-height:1000px;
}
JSFiddle Link
Easy, use background-size: cover:
.frontpage{
background: url('https://static.pexels.com/photos/168/apple-iphone-laptop-notebook.jpg');
background-size: cover;
background-position: center center;
min-height:1000px;
}
JSFiddle
Use the value contain for background-size, it will adjust the background to be contained within the bounds of the container
div {
background-image:url(http://placekitten.com/g/256/256);
background-size:contain;
background-repeat:no-repeat;
border:1px solid lime;
}
.first {
width:50%;
height:100px;
}
.second {
width:256px;
height:60px;
}
.third {
width:200px;
height:350px;
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
Well, you just try following style
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
This will make the background image width 100%, and height will get auto with correct ratio.
You also can try other options like
background-size: contain;
or
background-size: cover;
Related
I have a website with a cover image.
The problem is when a user resizes the window, the background does not stay fixed and full height.
What I want:
A way for the background image to stay fixed and full height whilst the user resizes the window.
This is what I have so far:
#top {
width: 100%;
height: 200px;
border-bottom: 1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
background-size: 100%;
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
http://jsfiddle.net/h64vyr60/
Is this what you are looking for?
Just need to set background size as cover, and add a media query:
#top{
width: 100%;
height:200px;
border-bottom:1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
background-size: contain;
background-position: top center;
background-repeat:no-repeat;
background-attachment:fixed;
}
#media screen and (max-width:900px) {
#top{ background-size: 900px auto;} //900px is the image original width
}
<div id="top"></div>
https://jsfiddle.net/hwzhsrer/
You can just keep background-size set to initial, or remove background-size property. This will retain the image height when the page is resized.
#top{
width: 100%;
height:200px;
border-bottom:1px solid black;
background-image: url(http://www.kohmooksivalairesort.com/include/gallery/slide/13393910371.jpg);
background-size: initial;
background-position: top center;
background-repeat:no-repeat;
background-attachment:fixed;
}
<div id="top"></div>
Hope that helps you out!
Why the background image not working with
DEMO
HTML
<div class="container" style="background-color: red;"></div>
CSS
.container {
width: 100%;
height: 385px;
background-image: url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
background-position: center top;
background-size: 100% auto;
background-size: cover;
border-bottom: 1px solid #3f4858;
background-repeat: repeat-x;
left: 0px;
top: 0px;
}
Apart from the already mentioned spelling error
The problem here is with the size of your container and the size of your background image. Your image has a lot of space on top and you will see nothing for the size of you container. Check if you change the background-size property to:
background-size: 100% 100%;
Demo
For the porperty background-size you can also use contain:
the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area
AnotherDemo
Your width: 100% depends on width of parent element. And its not set. Thats why. So change your CSS to this:
.container{
width:300px;
height:385px;
background-image:url(http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png);
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background-repeat:repeat-x;
left:0px;
top:0px;
}
Also why you have in your HTML style="background-color:red;"? Do you want to have as background image png_grass_by_moonglowlilly-d5z1o5t.png or red color? Or you want to have in transparency of that PNG image red color?
DEMO
Try This:
.container{
width:300px;
height:385px;
background-image:url('http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png');
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background-repeat:repeat-x;
left:0px;
top:0px;
}
<div class="container" style="background-color:red;">
The image is of size 1024x819px and the grass is starting from 232px from top so you need to position your background image or change your div.container size so as to fit the image within the given size.
Demo-1 with container size changed:
Demo-1
Demo-2 with image position changed with your code snippet only.:
Demo-2
just notice background-position I have changed to 0px -232px;
I have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
Hey,
I would like to get a whole image, in the width of the browser, as my header.
But the thing is, i get a horizontal scroll bar, and I don't want that.
What I want is that the image adjust if the browser also adjust.
Is this possible with css?
Sorry for my bad english.
This is my code
#header {
Margin-left:auto;
Margin-right:auto;
heigth:400px;
position: center center;
min-width: 100%;
max-width: 1024;
}
<body>
<div id="header">
<img src="header.png" />
</div>
You could chose to set your image as background image and use background-size: cover; like this:
#header {
width: 100%; height 400px;
margin: 0 auto;
background: url("../header.png");
background-size: cover;
}
<div id="header"></div>
You can find more explanation about background-size here:
http://www.css3.info/preview/background-size/
Try.
#header {
max-width: 100%;
background:#ffffff url("header.png") repeat-x;
}
You may be looking for a background cover:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Using the cover method will scale the images to fill the container.
You can set #header img { max-width: 100%; }
Hmm, if i do a background-image, the image itself does not show up. Maybe beacause its 1400px in width, can css crop this for each diffrent width of the browser witout any horizontal scrolling bar.
I want to set a background image to different divs, but my problems are:
The size of image is fixed(60px).
Varying div's size
How can I stretch the background-image to fill the whole background of the div?
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
height:180px;
width:200px;
border: 1px solid red;
}
Check the code here.
Add
background-size:100% 100%;
to your css underneath background-image.
You can also specify exact dimensions, i.e.:
background-size: 30px 40px;
Here: JSFiddle
You can use:
background-size: cover;
Or just use a big background image with:
background: url('../images/teaser.jpg') no-repeat center #eee;
Modern CSS3 (recommended for the future & probably the best solution)
.selector{
background-size: cover;
/* stretches background WITHOUT deformation so it would fill the background space,
it may crop the image if the image's dimensions are in different ratio,
than the element dimensions. */
}
Max. stretch without crop nor deformation (may not fill the background): background-size: contain;
Force absolute stretch (may cause deformation, but no crop): background-size: 100% 100%;
"Old" CSS "always working" way
Absolute positioning image as a first child of the (relative positioned) parent and stretching it to the parent size.
HTML
<div class="selector">
<img src="path.extension" alt="alt text">
<!-- some other content -->
</div>
Equivalent of CSS3 background-size: cover; :
To achieve this dynamically, you would have to use the opposite of contain method alternative (see below) and if you need to center the cropped image, you would need a JavaScript to do that dynamically - e.g. using jQuery:
$('.selector img').each(function(){
$(this).css({
"left": "50%",
"margin-left": "-"+( $(this).width()/2 )+"px",
"top": "50%",
"margin-top": "-"+( $(this).height()/2 )+"px"
});
});
Practical example:
Equivalent of CSS3 background-size: contain; :
This one can be a bit tricky - the dimension of your background that would overflow the parent will have CSS set to 100% the other one to auto.
Practical example:
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: auto;
/* -- OR -- */
/* width: auto;
height: 100%; */
}
Equivalent of CSS3 background-size: 100% 100%; :
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: 100%;
}
PS: To do the equivalents of cover/contain in the "old" way completely dynamically (so you will not have to care about overflows/ratios) you would have to use javascript to detect the ratios for you and set the dimensions as described...
For this you can use CSS3 background-size property. Write like this:
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
height:180px;
width:200px;
border: 1px solid red;
}
Check this: http://jsfiddle.net/qdzaw/1/
You can add:
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
background-size: 100% 100%;
height:180px;
width:200px;
border: 1px solid red;
}
You can read more about it here: css3 background-size
by using property css:
background-size: cover;
body{
margin:0;
background:url('image.png') no-repeat 50% 50% fixed;
background-size: cover;
}
Use:
background-size: 100% 100%;
To make background image to fit the div size.
To keep the aspect ratio, use background-size: 100% auto;
div {
background-image: url('image.jpg');
background-size: 100% auto;
width: 150px;
height: 300px;
}
Try something like this:
div {
background-image: url(../img/picture1.jpg);
height: 30em;
background-repeat: no-repeat;
width: 100%;
background-position: center;
}