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>
Related
I have two images which get overlayed on top of each other in my application, these are represented as foreground and background. For both of these I'm using background-attachment: fixed to make sure the images are always the exact same size as each other. This allows me to add an edited version on the foreground, but still keep the two images consistent so they both look like one.
You can see an example of this below;
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
The issue I'm having is that I have a need to zoom these images in on an animation. To do this I'm using transform: scale (1.5) on a keyframe, but the more it scales, the more out of sync the two images get. I expect foreground to be scaled the exact same as the background as they are on the same plane due to background-attachment: fixed, but I'm guessing the required height and margin properties cause some issues.
html,
body {
height: 100%;
width: 100%;
}
.background_container,
.foreground_container {
height: 100%;
width: 100%;
position: relative
}
.background,
.foreground {
background-image: url("https://i.redd.it/uojoraeqr4c31.png");
background-size: cover;
background-attachment: fixed;
height: 100%;
transform: scale(1.5);
}
.foreground {
max-height: 50%;
margin: 5rem 0;
}
<div class="background_container">
<div class="background"></div>
</div>
<div class="foreground_container">
<div class="foreground"></div>
</div>
Is there any sort of solution to this? I want example 2 to look like example 1, just more zoomed in.
https://jsbin.com/nesekuxuyu/1/edit?html,css,output
See my jsbin.
Remove your foreground specific styling and add overflow: hidden; to the parent container. It was scaling properly however it was exceeding the bounds of it's parent container and by hiding the overflow you prevent it from distorting the bits you can see.
Edit In outside discussion with James I see the actual issue and am working on an appropriate solution. Scale is overridng the fixed behavior inherent in background-attachment
So I'm trying to make it so that a full page image shows in the page, and resizes responsively on different screens so that it always takes up the whole screen. I looked it up on w3schools and other questions on Stack, but it seems that no matter what I do it never works, I checked if something is overriding my CSS in the browser developer tools but it seems there is nothing wrong, it just simply doesnt work. I'm using bootstrap and the div which background image should be full page is a col-12, would that cause the problem? This is my css:
body, html {
height: 100%;
}
#image-div {
background-image: url("paper.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
color: white;
background-color: rgba(0,0,0,0.5);
background-blend-mode:darken !important;
font-size: 20px;
}
and the html:
<div className="row" id="calculator-row">
<div className="col-12" id="image-div">
<div className="over-image">
<p class="try-calculator">
Calculate the possible return of investments
</p>
</div>
</div>
<div className="col-12" id="calculator-div">
<h1>Return of Investments</h1>
<BenefitCalculator />
<strong>*The average conversion percent is 4, but enter yours in case you know it</strong>
</div>
</div>
EDIT: Forgot to mention I am also using REACTJS
Try backgound-size: cover, contain;
If this does not work send an example of you code. Also height in percentage is always a bad idea. If this is for the element to be as tall as the page use 100vh or some other method. Also note that you will probably need a media query for portrait and landscape orientation.
Try this snippit:
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.row-fw {
width: 100vw;
height: 100vh;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
#image-div {
background-image: url("https://placekitten.com/g/1920/1080");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
display: block;
width: 100%;
color: white;
background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: darken !important;
font-size: 20px;
}
<html>
<body>
<div class="row row-fw">
<div id="image-div"></div>
</div>
</body>
</html>
You could also be using height: 100vh; & width: 100vw; (vw = viewport width, vh = viewport height).
If the parent gets bigger than the size of your screen, so will the background. 100vw & 100vh will only use the viewport width & height.
just add below class to the parent div of image, it will scale itself as per screen sizes.
.img-responsive -> Makes an image responsive (will scale nicely to the parent element).
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;
}
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.