Effect : https://codepen.io/anon/pen/YZvymg
Desired Effect : https://codepen.io/anon/pen/RpJWXm
Open the picture to the biggest point then minimize your browser.
How do I make it so the entire background image resizes when the browser gets smaller(minimize)? This is what happens in the "Desired Effect" but in the "Effect" when I use background it doesn't resize.
<header>
<div class="image"></div>
<header>
html,body {
height: 100%;
}
header {
height: 100%;
width: 100%;
}
.image {
height: 100%;
width: 100%;
background: url("https://dl.dropboxusercontent.com/s/er5sypbyluenzco/Its%20ok.jpeg");
}
You can achieve it by setting background-size
.background {
height: 100%;
width: 100%;
background: url("https://dl.dropboxusercontent.com/s/er5sypbyluenzco/Its%20ok.jpeg");
background-size:100% 100%; /*this one*/
}
Try with background-size property.
Related
I'm making a website and the website is basically just a huge image except for the clickable elements and I was wondering how I could make the image size increase according to the the user's screen size so that the image doesn't look stretched, but still fits the whole screen. This is my first time working with viewport, so I can't exactly say I understand it very well. Here's some code to help out:
<div class="Image">
<img src="Background.png"/>
</div>
.Image {
width: 100vw;
height: 100vh;
object-fit: contain;
}
The first part was written in index.html while the second was written in style.css. Just for your info, the html part was written in <body>.
You have to apply
width: 100vw;
height: 100vh;
object-fit: contain;
To img directly , you can use id class or img directly but last method is not recommended as it will apply to all img tags in the document
I have used red background to show how much area image covers but as object-fit: contain; so image ratio's are maintained
Read this to know more about object-fit
Use
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
To remove any unnecessary horizontal scroll bars as tags have some default margin and padding . So , here used the body tag
.Image {
width: 100vw;
height: 100vh;
object-fit: contain;/*Can be cover , fill , none...*/
background-color: red;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
<div>
<img src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="Image" />
</div>
<div class="fullscreen" />
.fullscreen {
position: fixed;
top: 0;
left: 0;
background-image: url(Background.png);
background-size: cover;
background-position: center;
width: 100vw;
height: 100vh;
}
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
Let's say that I want to fit an 10*60 image into a 15*15 container. That is to say, I want to stretch my image so that the width correspond (so that would be an image of 15*90), but I do not want the height to stretch more than the width, so the bottom of my image will not appear.
When I define my html image, I put an width=100% to stretch the width, but what do I say to the height?
Thank you !
You can simply use a background image and set its background-size property to contain (or cover, depends what you need).
.container {
background: url(http://via.placeholder.com/350x300) no-repeat center center orange;
background-size: contain;
animation-duration: 3s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes changewidth {
from {
width: 100px;
height: 300px
}
to {
width: 300px;
height: 100px
}
}
<div class="container"></div>
You can also position the image absolute, so you can do something like this:
.embed.ratio-16-9
img
.embed {
position: relative;
height: 0;
overflow: hidden;
max-width: 100%;
img {
position: absolute;
top: 0;
left: 0;
right: 0;
min-width: 100%;
}
.ratio-16-9 {
padding-bottom: 56.25%;
}
The image height should no longer be stuck to you block.
If I understood the question correctly, you don't have to specify any value on the height property. Just set overflow:hidden on your container if you don't want the overflowing part of the image to show. Hope this helps.
CSS background-image with background-size: cover
You should use CSS background-image property for this kind of styling your web elements.
What you're looking for is probably the background-size: cover;. What it does is it fits the image based on width of the container.
CSS:
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
}
HTML:
<div class="cont"></div>
Also, if you want to center your image vertically use background-position-y: center;.
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
background-position-y: center;
}
HTML img tag
If you really need to use an <img /> tag for this operation; What you need is to put the image into container, then set the width, height to your desired size and overflow-y to hidden. After that, set the width of an img to 100% and it's done.
CSS:
.cont {
width: 200px;
height: 200px;
overflow-y: hidden;
}
.cont img {
width: 100%;
}
HTML:
<div class="cont"><img src="image100x300.jpg" /></div>
Working demo CSS w/o y-axis center: https://jsfiddle.net/e2vt3sw6/
Working demo CSS w/ y-axis center: https://jsfiddle.net/e2vt3sw6/1/
Working demo HTML img tag: https://jsfiddle.net/e2vt3sw6/2/
Tests where made using 150x300px image and 200x200px container
I have rotating banner images which I'd like to work (scale to fit) in any screen size.
When I use the following, it works:
.banner{
position:absolute;
width: 80%;
height: 30%;
top:5%;
left:20%;
background:#FFF;
border:hidden;
}
However, when I try to change the width to for example 40%, the images truncate rather than scale down.
When I tried to use, for example, max-width: 80%, or width: auto, the images totally disappear, even if I use a high z-index.
Setting both width and height on your images, will not care about aspect ratio. Just use width = 100%, and leave the height related to it (with the technique below).
And then set the container width to whatever you want:
#banner {
width: 100%;
height: 0;
padding-top: 30%;
background: red;
}
#banner-container {
width: 400px;
}
<div id="banner-container">
<div id="banner"></div>
</div>
If you want to show an image inside it, use CSS background-image with background-size: cover:
#banner {
width: 100%;
height: 0;
padding-top: 30%;
background: gray;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
}
#banner-container {
width: 400px;
}
<div id="banner-container">
<div id="banner" style="background-image: url('http://placekitten.com/800/500');"></div>
</div>
Hey there I am building a website! I'm trying to make the background-image to fit the whole div.section. I tried height: 100%; width: 100%; but it did not work. I need some help.
The part of the code which needs to have the background image:
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
}
My complete code on JSFiddle: https://jsfiddle.net/2Lqxqw10/ (Make sure to make the width of the result maximum) or another link: https://mahalakshmi-consultants-shreyas1703.c9users.io/index.html
Thank You in Advance!
You can use absolute position with a proper z-index, it could also works :
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
z-index: -1;
}
See it here
Width and height set the proportions of your div. To set the size of the background, you need the css property background-size:
.section {
background-position: 0 0; // start from top left
background-size: 100% 100%; // expand to 100% in both directions
}
You need to set a certain height to your section e.g :
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 500px;
width: 100%;
}
fiddle
Currently .section is null or no data in it
put some data in it or give some specific height to the .section to view section
Add position absolute to the .section class.
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
position absolute;
}
https://jsfiddle.net/2Lqxqw10/6/