I tried with
.slider {
background: url(../images/slid1.jpg) no-repeat 0px 0px;
background-size: cover;
max-width: 100%;
min-height:800px;
}
.slider1 {
background: url(../images/slid2.jpg) no-repeat 0px 0px;
background-size: cover;
}
.slider2 {
background: url(../images/slid3.jpg) no-repeat 0px 0px;
background-size: cover;
}
i want to know how to make this div image responsive?
In your example css you are using background-size:cover. This property causes the image to scale to the smallest size in where both the width and height of the image are at least the size of the container. background-size:contain might be give the behaviour you want. It is the opposite of cover, in that it tries to scale the image to be as big as possible in the allocated space without clipping.
.img
{
background-image:url(https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d);
background-repeat:no-repeat;
background-size:contain;
min-height:400px;
max-width:50%;
}
<div class="img">
</div>
Related
I have HTML and CSS like this:
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-size: 100% auto;
border-radius: 50px 50px;
}
<div class='item'></div>
When I resize the browser, the bottom border-radius doesn't work.
Change background-size: cover; and you could add background-position: center; to center your image.
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius:50px 50px;
}
<div class='item'></div>
As mentioned in other answers, you might want to use background-size: cover;. It will stretch the image to cover the whole area of the div (so the border-radius will be visible).
However since the image can be cropped after this change (specifically in the case when it does not have the same aspect-ratio like the area of the div), it might be necessary to use also background-position to position the background image as you like (by default it is aligned to the top left corner).
Most probably you will have good results with centering it, but the possibilities are endless ;)
background-size: cover;
background-position: center;
How do I eliminate the whitespace when the browser size changes if I am using background-size:contain;?
The whitespace between the image and the text is way too much with smaller browser sizes. site is: http://16debut.com/test.html
CSS is:
body {
margin:0px 0px;
}
#hero {
background-clip: content-box;
background-image: url("imgtop.png");
background-size: contain;
background-repeat: no-repeat;
position: relative;
height: 235vh;
}
#content {
padding: 100px 50px;
text-align: center;
width: 80%;
margin: 0px auto;
}
#content h2 {
margin: 0px 0px 30px 0px;
}
#footer {
padding: 30px 0px;
text-align: center;
background: #ddd;
}
jsbin demo
You want to go fully responsive but keep the white clouds at the bottom?
Use two background images for the same element.
Cut out the white bottom clouds save as separate .png image. Use as first background-image.
(optional) Save again your bigger image, just without the white clouds. Use that image as second background image value.
Now in CSS:
set the clouds to background-position: bottom and 100% size ("width")
Set the bigger image to center (50%) position and cover
CSS
html, body{height:100%; margin:0;}
#hero{
position:relative;
height:130vh; /* USE THE RIGHT RATIO since the image Logo is a bit up*/
background: no-repeat
url(http://i.stack.imgur.com/eWFn6.png) bottom / 100%, /* BOTTOM CLOUDS OVERLAY */
url(http://i.stack.imgur.com/IVgpV.png) 50% / cover; /* BIG IMAGE */
}
HTML
<div id="hero"></div>
<div class="other">
<h1>Other Divs</h1>
<p>bla bla</p>
</div>
Seems that Safari is a quite stupid browser (they even removed support for windows since 2012... Amazing). Here's the jsBin example and css:
#hero{
position:relative;
height: 900px;
height: 100vh;
background: url(http://i.stack.imgur.com/eWFn6.png) no-repeat bottom, url(http://i.stack.imgur.com/IVgpV.png) 50%;
background-size: 100%, cover;
}
I would like to make a background image move as the use scrolls and it is normal to use
background-attachment:fixed;
But the issue is that it is stretching the image and I am not able to position it anymore.
http://jsfiddle.net/5c3b56a7/3/
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
}
.container2{
background-attachment:fixed;
}
You can see the issue better on full screen
http://jsfiddle.net/5c3b56a7/3/embedded/result/
First image is position center top
second one cannot be positioned due to the attachment.
Is there any way to do this?
Unfortunately you cannot use background-attachment: fixed and background-size: cover together.
When background-attachment: fixed determine background image to behave like position: fixed element, background-size: cover forced it to calculate background size relatively to the element itself.
Still you can use JavaScript to calculate background position in window.onscroll() event.
Maybe I misunderstood the problem. Here is my variants as I realized that I want to get a result.
http://jsfiddle.net/p507rg68/light/
HTML
<body class="container2">
<div class="container"></div>
<div class="push"></div>
</body>
CSS
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
}
.container2{
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
background-size:cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
}
.push{
margin-bottom:800px;
display: block;
width: 100%;
height:1px;
}
use background-size: to set the image size!
I have a header div, which I want to be fully covered with a background image. I want the image to be fully shown, so nothing is cropped. However, it seems to be stretching the image and cropping it.
css:
..header{
border-top-left-radius:5px;
border-top-right-radius: 5px;
max-width: 600px;
width:100%;
height: auto;
min-height: 200px;
background: url("img/bg-abstract.jpg") no-repeat fixed;
background-position: left top;
background-size: 100%;
position: relative;
background-attachment: fixed;
background-repeat: no-repeat;
}
What you need is
background-size:cover
background-size: cover Also try using % instead of px.
I want to use a background image to my section element with width:100% and height:40%.
So i used CSS3 and used this solution:
background-image: url(My_Local_Image);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: center top;
It worked nice!
My problem now is that i want the background-image to be cropped to fit the size i specify. Now image is streched to fit.
Is there ant way that i can achieve this?
FIDDLE
Unfortunately you cannot do something like
background-size: cover 40%;
cause you'll loose the 100%
the solution would be so make a separate image container, and after it an element for your (I suppose) text, setting simply background-size: cover; for the image container,
setting also width: 100%; and height : 40%; for the same.
But what you can do is
LIVE DEMO
<section>
<div class="sectionImage" id="first"></div>
<div class="sectionContent">1</div>
</section>
<section>
<div class="sectionImage" id="second"></div>
<div class="sectionContent">2</div>
</section>
<section>
<div class="sectionImage" id="third"></div>
<div class="sectionContent">3</div>
</section>
section{
background:#444;
position:relative;
margin:10px auto;
height:300px;
width:800px;
color:#fff;
}
.sectionImage{
width: 100%;
height:30%;
background: transparent none no-repeat center center;
background-size: cover;
}
.sectionContent{}
#first{
background-image: url('1.jpg');
}
#second{
background-image: url(2.jpg);
}
#third{
background-image: url(3.jpg);
}
If I understand what you're trying to do, simply remove the 40% from your background-size and the image will fill the div at the 800x300px size.
You must place the background container inside your main container. After that you must provide width and height of main containter and make overflow:hidden.
You can then play with main container's width and height to change crop size. (You can use width:40%; and height:100% too)
Here is JSFidde.
HTML:
<section id="first">
<div id="bg"></div>
</section>
CSS:
#first{
height:300px;
width:200px;
overflow:hidden;
}
#bg{
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center top;
width:800px;
height:300px;
}
Use an inner div to get the crop effect:
Fiddle
CSS
#first{
height:300px;
width:800px;
}
#first div{
width:100%;
height:40%;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size:100%;
background-position: 50% 50%;
}
Use the :before pseudo class
#first:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 40%;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center center;
}
This will give you many CSS options to deal with both bigger/smaller images, stretching/cropping, etc., without messing with the html