I have a full width banner and Im using this style :
.headline--hero {
width: 100%;
min-width: 100%;
padding: 0;
height: 490px;
}
#media (max-width: 1024px) {
.headline--hero {
height: 46vw;
}
}
.headline--hero>h2 {
width: 100%;
height: 100%;
}
.headline--hero>h2>img {
width: 100%;
height: 100%;
object-fit: cover;
}
This works just fine with Chrome. When I zoome out using CTRL+- the full width banner adjust fine.
In IE however it broken looks like the style object-fit: cover; is not working. I tried using
.headline--hero>h2 {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.headline--hero>h2>img {
height: auto;
width: 100%;
}
The width of the banner is working fine it gets all 100% but the height is the problem, my guess is since there is a position absolute the image is not moving height so the image is not getting the complete height.
Is there a way to replicate the style object-fit: cover; in IE other the one I tried?
Unfortunately object-fit is not supported in IE
Here is the article I've found - https://css-tricks.com/almanac/properties/o/object-fit/
You can try background-size: cover;
As a guy in comments mentioned before
Related
I have an image on my website that I'm making but when I am on the website on mobile the image is zoomed in on a bad part of the image rather than the focal point of it. I want to figure out a way in CSS that when shrinking the webpage down to a mobile size it zooms in on the center of the image rather than the bottom left so that I don't have to use a separate image for mobile. Thank You.
Do some research into media queries they could help.
Adapted from https://stackoverflow.com/a/19744413/3807365
.frame {
width: 128px;
height: 128px;
overflow: hidden;
position: relative;
}
.frame img {
position: relative;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
/* for demo: */
.big-frame {
position: relative;
width: 256px;
height: 256px;
display: flex;
}
.big-frame>img {
position: absolute;
opacity: 0.25;
}
.frame {
left: 64px;
top: 64px;
}
<div class="big-frame">
<img src="https://picsum.photos/id/211/256">
<div class="frame">
<img src="https://picsum.photos/id/211/256">
</div>
</div>
You can use Media Queries to write CSS for specific resolutions and screen orientations. Hope this helps! Example:
// Mobile resolution
.img {
width: 500px;
height: 300px;
object-fit: cover;
}
// Larger screens
#media (min-width: 992px) {
.img {
width: 100%;
height: 300px;
}
}
My website is https://www.pisqueya.com
I have a big background image full width always visible at the bottom of all pages, it's working fine on desktop but not on mobile device.
Anyone know what I'm missing with my code below to fix that please?
body {
font-family: portuguesa;
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed;
background-size: contain;
height: 100%;
overflow: hidden;
background-color: #fdeae1;
}
#wrapper,
#main {
background-color: initial!Important;
}
It looks fine for me.
The thing is when you are in a smaller screen the picture is getting small too.
If you want to use the same picture you should change the value of background-size for mobile devices or use a different picture for them.
Hope it can be usefull too.
https://www.w3schools.com/cssref/css3_pr_background-size.asp
Best regards.
You can use CSS media queries for mobile device. Add media query CSS for mobile device size and put your CSS Code in it. Following code will help you.
<style>
#media only screen and (max-width:768px) and (min-width:200px)
{
body {
font-family: portuguesa;
height: 100%;
overflow: hidden;
position: relative;
}
body::after {
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-size: contain;
z-index: -1;
}
}
Change Your CSS
body {
font-family: portuguesa;
height: 100%;
overflow: hidden;
position: relative;
}
/*Add This CSS*/
body::after {
background: url(https://www.pisqueya.com/wp-content/uploads/2019/07/footer-pisqueya.png) no-repeat center bottom fixed #fdeae1;
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-size: contain;
z-index: -1;
}
I'm creating simple media for screens over 2560px in width. My problem is that I have header and over 2600px I set static width to my header, when I resize window over 2600px header have 2600px width but image is resizing. How to set image size relative to header width, not to screen width??
#header {
position: relative;
height: 100vh;
.background-image {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('~/images/17.jpg');
background-size: cover;
background-attachment: fixed;
filter: brightness(50%);
-webkit-filter: brightness(50%);
}
}
#media only screen and (min-width: 2600px) {
#header {
width: 2600px;
margin: 0 auto;
height: 1000px;
.background-image {
width: 2600px;
}
}
}
The problem is with background-attachment: fixed; which causes the background to scale with the viewport. According to MDN,
The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with background-clip: text.)
And neither is it compatible with background-size: cover, apparently.
Solution: reset the background-attachment in the media query.
Here is a codepen with the solution.
Or, for people who prefer snippets, a snippet (only with the SCSS compiled).
body {
margin: 0;
}
#header {
position: relative;
height: 100vh;
}
#header .background-image {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("https://placehold.it/900x300");
background-size: cover;
background-attachment: fixed;
filter: brightness(50%);
-webkit-filter: brightness(50%);
}
#media only screen and (min-width: 600px) {
#header {
width: 600px;
margin: 0 auto;
height: 190px;
}
#header .background-image {
background-attachment: initial; /* new */
}
}
<section id="header">
<div class="background-image">
hello
</div>
</section>
Note that I changed the sizes a bit to allow me to test; the breakpoint is now at 600px rather than 2600px, since I don't have that wide a monitor. So you don't have to copy the whole code, the new line with the background-attachment is enough.
I would use:
.background-image {
width: 2600px;
background-size: initial; /* to use the file sizes default height/width */
background-position: center; /* then optionally center the image */
}
Since .background-image has the same width as #header, your next obstacle would be the image's height hence the possible need for centering.
I'm using the following code to show a background image on my page:
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
#bg-pic > img {
width: 100%;
display: block;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" />
</div>
This works fine once the ratio of the browser window is wide enough. But in case I have a very small window I want the picture still to cover the page so instead of width: 100%; height: 100%; would be correct. How can I fix this?
EDIT: Since the provided answer don't solve my actual problem let's describe it using an example:
Let's assume my picture has dimensions 100x100 and my browser window has dimensions 200x100. Then only the upper 100 pixels are filled with the picture. What I want is that the whole browser window is filled by zooming into the picture (of course then the area on the right and on the left of the picture which corresponds to the right 25 and left 25 pixels of the picture is omitted).
Use the background property instead of an img element.
Demo:
body {
background: url('image.jpg') center center / cover;
}
jsfiddle
In your case:
html, body {
min-height: 100%;
}
body {
margin: 0;
background: url('bg.jpg') center center / cover;
}
You could use the object-fit and object-position properties on the image tag.
Codepen example
#bg-pic{
top:0px;
left:0px;
position: fixed;
opacity: 0.18;
z-index: -1;
margin: 0px;
width: 100%;
height:100%;
}
#bg-pic img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
You can read more about object-fit at CSS-Tricks : https://css-tricks.com/on-object-fit-and-object-position/
You just have to add height:100vh; in your img style tag,
You can't use height:100% because it won't be applied unless you have specified static height to parent div.
Always a better option to go for vh dimension.
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" style="width:100%; height:100vh; display: block;"/>
</div>
body { background-image:url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%; }
Try this
You can try flexbox like this:
#bg-pic {
top: 0;
left: 0;
position: fixed;
opacity: 0.5;
z-index: -1;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
img {
min-width: 100%;
min-height: 100%;
flex-shrink: 0;
}
<div id="bg-pic"><img src="https://picsum.photos/800/800?image=1069" style="" /></div>
Try this, its cross browser compatible:
div {
position:relative;
}
img {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This assumes you have given a size to the div.
You might be looking for background-size: contain. Paired with height: 100vh should give you desired effect.
If you need the image centered horizontally you can add background-position: 50% 0% or background-position: center; for both horizontal and vertical centering.
#container-with-background {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
}
<div id="container-with-background">
</div>
If you need your images to be inside your <img> tags you can achieve the same effect with max-width: 100% and max-height: 100% on the <img> tag, and fixed height on the container - height: 500px for example. Setting the height to 100vh will make it fullscreen.
#container {
height: 100vh; /* Can be set to fixed value if needed */
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg">
</div>
I want a particular picture to cover the entire background of my site and when the window is resized, I want the picture to be scaled accordingly. What I'm looking for is something like https://www.tumblr.com. Notice the picture in the background scales accordingly to the window size.
Here is my css:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Where #backdrop is the id for the image I'm using.
I've tried numerous things but nothing seems to change the way my image is displayed.
Use object-fit to let an img behave like a background-image. See this working example:
html, body {
height:100%;
margin:0;
padding:0;
}
img {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<img src="http://lorempixel.com/g/1100/300">
Two things:
Change the height: auto; to height: 100%, and add background styles.
#backdrop {
z-index: -999;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: url("image.jpg") center center no-repeat;
background-size: cover;
}
Also, use a HTML 5 Doctype:
<!DOCTYPE html>