I am trying to create a Div with a background image whose width x height is 1024px x 768px . And it has to fit whole browser window .
Using the below css i could achieve a image occupying full screen but the image gets cropped
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrapper {
background-image : url(home.jpg);
background-position: top center !important;
background-repeat: no-repeat !important;
background-size: cover;
background-position: center;
min-height: 100%;
width : 100%;
height : 100%;
}
#container {
height: 100%;
}
I tried #media option to set the width and height using below css but now i get full image with scroll bar and a white space means the image is not occupying full screen.
html, body {
height: 768px;
width: 1024px;
margin: 0;
padding: 0;
}
#wrapper {
background-image : url(home.jpg);
background-position: top center !important;
background-repeat: no-repeat !important;
background-size: cover;
background-position: center;
height: 768px;
width: 1024px;
}
#container {
height: 100%;
}
#media (min-width:769px) and (max-width:1024px){
// your code
}
Can someone guide me how can i accomplish it and it has to work in all the browser :(
Keep in mind that your screen resolution doesn't have to match your browser resolution. You have browser chroma (title bar, address, bookmarks etc), you have OS UI (task bar/launcher) etc.
So you can get that exact size only if you're using a larger screen (e.g. 1600x900), but otherwise you'll run into issues.
But whatever, let's say you really, really, really want to match that size.
You have to ditch background-size: cover; in favor of background-size: contain;, so you'll have the image resized to the container (see the specs here) and place the image to top left (instead of top center).
As a side note, I suggest you to use vh and vw units:
#wrapper { width: 100vw; height: 100vh; max-width: 1024px; max-height: 768px; }
This way you won't lock your users on a certain resolution.
You Want to add below codes to get div which size is 1024 * 720 just do as follows.
#media body
{
width:1024px;
height:720px;
}
Related
I have 11_100px(height) x 3_840px(width) image that I want to fit on my website, I managed to somehow fit it for desktop size using the padding-top trick calc(height / width * 100%) to calculate aspect ratio). But when resizing viewport it becomes impossible to maintain for tablet and mobile.
Somehow I need to make the height fully reliable to the width size
I wasn't able to find any stack overflow sufficient answer, how are such large backgrounds handled for all devices?
Example: link to my example
The best way to achieve this is by adding a background image to a div.
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
background-image: url("https://via.placeholder.com/500x500.png?text=Placeholder");
background-size: cover;
background-position: center;
}
<div></div>
You can define a background-image for bodyto which you apply the below settings (except using your own image of course).
The background image will not scroll with the content in this case - I suppose this is what you want.
body {
margin: 0;
background-image: url("https://picsum.photos/1200/1600");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You can also do this to scale the image to fit the width of the screen and if the width is too long it will be hidden.
body {
background: url("https://picsum.photos/1200/1600");
background-size: cover;
object-fit: cover;
width: 100vw;
z-index: -1;
overflow-x: hidden;
}
nav {
height: 10vh;
width: 100vw;
}
footer {
height: 10vh;
width: 100vw;
}
<html>
<head>
</head>
<body>
</body>
</html>
So i have a div with a background image with background size set to cover.
Here is the div code:
.imgContainer {
width: 400px;
height: 340px;
z-index: 1;
border: 0;
background: url('https://dummyimage.com/800x680/ccc/333');
background-position: 50% 25%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-radius: .25rem;
}
#media screen and (max-width:650px) {
.imgContainer {
width: 100% !important;
}
}
<div class="imgContainer"></div>
The background shows the image completely but since i am making my site responsive, i change the div on width 650px using the #media rule.
#media screen and (max-width:650px){
.imgContainer {
width: 100% !important;
}
}
When the div is enlarged, the background-image widens and don't show much content of the image. The image's content is shown completely when the width is 400px and height 340px. The problem occurs when the div's width is 100% and the image's content does not show as much as it shows when it is 400px wide. How to fix this?
And thanks in advance!
With background-size: cover you're telling the browser to ensure that the image covers the entirety of the element while maintaining the image's original aspect-ratio. So it is to be expected that changing the aspect ratio of the HTML element will cut off some of the image to make this happen.
In order to make your image responsive you'll have to ensure that the aspect-ratio of your image remains the same.
One way to do this is to use something like the following:
#media screen and (max-width:650px) {
.imgContainer {
width: 100%;
padding-bottom: 85%;
height: auto;
}
}
This will set the padding to be 85% of the width of the element as 100 / (400/340) = 85. Assuming nothing else is in your div this will give it the appropriate aspect ratio for your image.
This might help.
Notice: It only works, if the image has an aspect ratio of 400:340 (e.g. 800 x 680, 600 x 510, etc.)
Notice: The 418 pixel in the last media query is an empirical value based on the current paddings and margin. You might need a different value.
Here is the codepen to see in in action
.imgContainer {
width: 400px;
height: 340px;
z-index: 1;
border: 0;
background: url("https://dummyimage.com/800x680/ccc/333");
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
border-radius: 0.25rem;
}
#media screen and (max-width: 650px) {
.imgContainer {
width: 100% !important;
background-size: contain;
}
}
#media screen and (max-width: 418px) {
.imgContainer {
background-size: cover;
}
}
<div class="imgContainer"></div>
I am trying to build a parallax-website but I'm running into problems when it comes to adjusting the size of the image.
My goal is to have the image in the background (obviously) and scroll over it.
To have the second layer in the foreground, I need to specify the height of the "gap" until the second layer starts scrolling over the image. If I understand it correctly, that's the value min-height: X; of the .bg-img1 (etc.) in my code.
Of course I can simply enter a number of pixels, let's say 600, and always have the distance of 600px. But what I would like to archieve is that the height is scaling according to scale of the bg-image. Otherwise I will have a tiny image with lots of white space on smaller devices.
Some of my code:
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
background-repeat: no-repeat;
}
.bgimg-1 {
background-image: url("images/viive_10.jpg");
min-height: 600px;
width: 100%;
}
.bgimg-2 {
background-image: url("images/viive_26.jpg");
min-height: 600px;
width: 100%;
}
.bgimg-3 {
background-image: url("images/viive_24.jpg");
min-height: 600px;
width: 100%;
}
you can test width background-size:cover; or background-size:content; here you have the difference.
https://css-tricks.com/almanac/properties/b/background-size/
Right now my background image adapts to the screen size. The problem is, when the screen shrinks too much (e.g. mobile) the background image is no longer long enough to fill the div vertically.
So what I did was to assign a value to width instead of using 100%:
#content {
width: 2000px;
}
The problem is, the div is no longer responsive, since it has a fixed width.
How to solve this dilemma?
Here's the relevant code:
HTML:
<div id="content">
<div class="container clearfix">
</div>
</div>
CSS:
.container {
position: relative;
margin: 0 auto;
width: 960px;
}
#content {
background: url(images/bg.jpg) repeat 0 0;
background-repeat: no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
background-attachment: scroll;
background-position: 50% 0;
position: relative;
width: 100%;
height: 750px;
}
#content .container {
height: 750px;
}
And the live site: http://www.m2comm-semi.com/
These two rules
background-size: cover;
background-position: center; /* bottom, top, etc */
should make your background image work properly on every resolution as long as it is big enough to cover f.e. 1900x1200, just give it a shot and let me know if the result is satisfying, bro.
I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped. I just don't want the white space on the edges.
Currently, I have: http://jsfiddle.net/ndKWN/
CSS
#main-container {
float: left;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.chapter {
position: relative;
height: 1400px;
z-index: 1;
}
#chapter1 {
background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
#chapter2 {
background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
See my answer to a similar question here.
It sounds like you want a background-image to keep it's own aspect ratio while expanding to 100% width and getting cropped off on the top and bottom. If that's the case, do something like this:
.chapter {
position: relative;
height: 1200px;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/3/
The problem with this approach is that you have the container elements at a fixed height, so there can be space below if the screen is small enough.
If you want the height to keep the image's aspect ratio, you'll have to do something like what I wrote in an edit to the answer I linked to above. Set the container's height to 0 and set the padding-bottom to the percentage of the width:
.chapter {
position: relative;
height: 0;
padding-bottom: 75%;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/4/
You could also put the padding-bottom percentage into each #chapter style if each image has a different aspect ratio. In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value.
http://jsfiddle.net/ndKWN/1/
You can use background-size: cover;
But the thing is that the .chapter class is not dynamic you're declaring a height:1200px
so it's better to use background:cover and set with media queries specific height's for popular resolutions.