I have an image of 2000* 8000 pixels. I wanted to make the width as same as the loading window while the height must be scrollable.
I mean that after the page loads width:100% and height:25% must only be displayed of the image. Then when i scroll down the rest of the height must be displayed i.e. the image should only scroll downwards not sideways.
.img {
max-width: 100%;
max-height: 100%;
height: inherit !important;
}
html {
background: url(importantwebsite.jpg);
background-size: 100%;
/*-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;*/
}
I have used the above code but it displays 100% width and 25% height, And the rest of the image is not shown. Please help..!!
demo - http://jsfiddle.net/victor_007/uoco335z/
change the width:100% and height:auto of the image
.img {
width: 100%;
height: auto;
}
<img class="img" src="http://placeimg.com/2000/8000/any">
Remove max-height:100% and apply height:100% !important like below.
.img{
max-width: 100%;
height:100% !important;
}
DEMO
Related
I'm trying to solve an issue with my own css stylesheet along with bootstrap. I'm trying to have an image set as a background image on my index page, but can seem to display it.
CSS in my stylesheet:
.main-image{
background-image: url(img/studio.png);
height:100%;
width: 100%;
}
HTML:
<section class="row main-image"></section>
Adding 100% width/height won't work here, because the parent of the element doesn't have static dimensions.
Instead of using height/width: 100%, use 100vh and 100vw.
1vh - Relative to 1% of the height of the viewport.
1vw - Relative to 1% of the width of the viewport.
So your code has to be:
body { margin: 0 } /* Removed the default body margin */
.main-image{
height: 100vh;
width: 100vw;
background-image: url('http://www.superedo.net/wallpapers/wallpapers/Android%20Tablet/Huawei%20Mediapad%2010%20Fhd/huawei_mediapad_10_fhd_005.jpg');
background-size: cover;
}
<section class="row main-image">
<!-- -->
</section>
You need to define what space the image should be in
Fiddle example here
.main-image{
height: 500px;
width: 100%; /* responsive */
background-image: url('https://www.prestigeanimalhospital.com/sites/default/files/08-cat-cancer-4.jpeg');
background-size: cover;
background-position: 100% 50%;
}
<section class="main-image"></section>
You can control what is shown with background-position: 100% 50%;
100% is X - the horizontal value.
50% is Y - the vertical value.
Or do it with background-position-x and background-position-y
I'm working on a project where a div dynamically shrinks as the page shrinks. Unfortunately the div stays the same height this way:
CSS
.container {
min-height: 180px;
max-height: 350px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 350px;
}
HTML
<div class="container"></div>
Instead of fixed height, use em/vh/% units for height depending on what is suitable. You can also use relative height with min-height and max-height to define a range. For example, try resizing the window and see that container always occupies half of available height.
.container {
height: 50vh;
background: green;
}
<div class="container"></div>
If I am using background-size: cover; for a background image and that image is only 800px wide but the viewport is 1500px wide, how can I make it so that the image does not exceed its own width? (I don't want it stretched any larger than it's original size.)
header.hero {
position: relative;
clear: both;
overflow: hidden;
min-height: 390px;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
}
Add this css:
max-width: 800px;
But I don't want to add a CSS definition every time I use a different
image...
So you can try add CSS properties:
width: auto; - your image width will be scale to img height
max-width: 100%; - your image never will be wider than container wrapper
I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
There's a similar question here about this: scale div to background image size but it didn't solve my problem either.
I'd really appreciate if someone knows how to do it.
EDIT:
I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/
This line is what is making the background image so small:
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
div figure{
padding-top: 36.56%; /* 702px/1920px = 0.3656 */
display: block;
background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
background-size: cover;
}
<div>
<figure></figure>
</div>
you can have a responsive height using the padding-bottom or padding-top
because you can't fix an height property in '%' with a width in '%'.
div{
background-image: url(url);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 auto;
width: 100%;
padding-bottom: heightPicure / widthPicture + %; //do it manually or using scss rules
}
Using web responsive design I want to put a big image as background on the frontpage, which always stays 100% width and height. Very similar to https://ghost.org
Here is how I'm trying to do it:
http://jsfiddle.net/Jp5AQ/1144/
div img {
max-width: 100%;
min-height: 100%;
height: auto;
outline: solid 1px red;
}
But it doesn't work correctly. The image is disturbed by resizing the window.
If you want to do this with pure CSS you can use the CSS3 background-size property:
div {
width: 100%;
height: 100%;
background: url(your-image.jpg) no-repeat center center;
background-size: cover;
}
Here is a fiddle demonstration:
http://jsfiddle.net/Jp5AQ/1149/
This is the same technique used on the Ghost site you gave as a reference.
Note that I've given the html and body elements height:100% so that the div stretches to fill the height of the viewport.
You are using <img /> tag.
Call the image through CSS and use background-size: cover;.
Here is the DEMO
Your image will always be the max-width of the browser window; however, the height will not stay at 100% of the browser window because the image on the screen needs to stay in proportion with the original image. As the width of the browser window shrinks, so will the height.Otherwise your image would be skewed.
You can use the property background: cover.
The post maybe be helpful http://css-tricks.com/perfect-full-page-background-image/.
Its hard to do that with an img tag.
it will work a lot better with:
background-size: cover;
background-position: center;
here is a Fiddle of it
just remove the image inserted with an image tag and instead put the image in a div as background.
div: should get height and width of window screen size (most likely with javascript)
insert image with the css style:
div{
background: url(path_to_img/img.jpeg) center center no-repeat;
background-size: contain; // you also can use cover, just look how you wish the picture should be cut or not. for background-size you also need some prefix for some browsers
}
here is the link for css background: http://www.w3schools.com/cssref/css3_pr_background.asp
and here is the link for background-size : http://www.w3schools.com/cssref/css3_pr_background-size.asp
try this css:
.banner-bg {
background-image: url(../images/header-bannerbg.png);
background-position: fixed;
background-repeat: no-repeat;
height: 580px;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
http://jsfiddle.net/aashi/Jp5AQ/1146/