I am trying to make a background image responsive with media queries,
but the image retains its original size.
I can't see where i am doing it wrong.
I appreciate any help
#wrapper{
background: url(https://via.placeholder.com/1500x1000) center center cover no-repeat fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
#media (min-width:1201) {
#wrapper {
background-image: url(https://via.placeholder.com/1300x900);
}
}
#media (max-width:1200px) and (min-width:901) {
#wrapper{
background-image: url(https://via.placeholder.com/900x750);
}
}
#media (max-width:900px) and (min-width:601) {
#wrapper {
background-image: url(https://via.placeholder.com/800x650);
}
}
/* For mobile devices */
#media only screen and (max-width: 600px) {
#wrapper{
background-image: url(https://via.placeholder.com/500x405);
}
}
<div id="wrapper">
</div
Inspecting the HTML reveals that your background property is invalid. Try
#wrapper{
/* mobile first this image and move to wherever you intended this one */
background: url(https://via.placeholder.com/1500x1000) center center no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
The rest of your queries could use some cleanup
/* For mobile devices */
#media only screen and (max-width: 600px) {
#wrapper{
background-image: url(https://via.placeholder.com/500x405);
}
}
#media (min-width:601px) {
#wrapper {
background-image: url(https://via.placeholder.com/800x650);
}
}
#media (min-width:901px) {
#wrapper{
background-image: url(https://via.placeholder.com/900x750);
}
}
#media (min-width:1201px) {
#wrapper {
background-image: url(https://via.placeholder.com/1300x900);
}
}
Related
when I made the mobile view version of the carousel image, the image broke.
how do you not break the image when responsive to mobile devices?
my Code:
#media screen and (min-width: 320px) and (max-width: 768px) {
.background {
position: relative;
flex-wrap: wrap;
}
.slideshow_container {
width: 100%;
.slideshow {
flex-direction: column;
img {
width: 33vh;
height: 33vh;
}
}
}
}
enter image description here
This question already has answers here:
How do I center an image if it's wider than its container?
(10 answers)
Flexbox: center horizontally and vertically
(14 answers)
Center image that is bigger than the screen
(9 answers)
Closed 2 years ago.
I use an image as a backround, something like this:
<div class="container">
<img src="http://somestorage.com/img.png" />
</div>
css:
.container {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: center;
}
.container img {
min-width: 100%;
min-height: 100%;
}
The problem is thought, that I wanna have a central top part on narrow screens. Now it shrinks like this:
I wanna it be like here:
JsFiddle
Could anyone suggest a solution?
Simply I changed min-width: 100%; with width: 100%; and added object-fit: cover;
.container {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: center;
}
.container img {
width: 100%;
min-height: 100%;
object-fit: cover;
}
<div class="container">
<img src="http://img.ohandroid.com/android/TJ0mc.png" />
</div>
I would try something like this:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: center;
}
.container img {
min-width: 720px;
min-height: 480px;
}
You could also change out the images for differing sizes of screens using media queries.
#media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
#media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
#media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
ref: https://web.dev/optimize-css-background-images-with-media-queries/
I appreciate your help with css. I was placing my banner image using background-image with inline-css. I need now to place out using img tag and well to target the parent with css. Unfortunately my image doesn't resize as when it was inside the inline-css.
Here is my css code. Please see on full page and resize page.
The "effect" I like is that on mobile image only center of image is shown, while on increasing page width image is resized by keeping center of image as the base for the position. See second image of example (called banner-two).
So how to recreate exactly as the image in banner-two using background-image but now placing the image as img src.
I also created a codepen with my code ( link to my code in codepen - please also resize ).
.banner-two {
background-size: cover;
background-position: center center;
height: 240px;
width: 100%;
}
#media (min-width: 768px) {
.banner-two {
height: 480px;
}
}
#media (min-width: 1200px) {
.banner-two {
height: 680px;
}
}
<div class="banner-one">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
<section>
<div class="banner-two" style="background-image: url('https://pictr.com/images/2018/10/06/06cVw2.jpg')"></div>
</section>
Edit: The below solution only works in Firefox; I can't seem to make it work in the other browsers.
I'll leave it up for now, in case it helps people in the right direction, but I'll delete it when a better working solution comes along.
Just position the banner in the right place.
.banner-one {
height: 240px;
display: inline-block;
position: relative;
left: 50vw;
transform: translateX(-50%);
}
.banner-one img {
height: 100%;
}
.banner-two {
background-size: cover;
background-position: center center;
height: 240px;
width: 100%;
}
#media (min-width: 768px) {
.banner-one,
.banner-two {
height: 480px;
}
}
#media (min-width: 1200px) {
.banner-one,
.banner-two {
height: 680px;
}
}
<div class="banner-one">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
<section>
<div class="banner-two" style="background-image: url('https://pictr.com/images/2018/10/06/06cVw2.jpg')"></div>
</section>
But the question is, why do you want to do this. You need a lot more CSS to make this work! My gut feeling would be to simply hide the img and then go on with what you were doing with banner-two. I can understand there being restraints that you have to work with though, so I hope this helps!
.banner-one {
width: 100%;
height: 640px;
display: flex;
justify-content: center;
}
.banner-one img {
max-width: 100%;
}
Until now, here is the code. Banner-flex isn't working as image is being centered completely. Banner-transform is working fine. link to examples on codepen
I do wonder if there is a way to do it that could be said is better or more efficient.
Thanks again !
<div class="banner-flex">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
<div class="banner-transform">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
.banner-flex {
width: 100%;
height: 240px;
display: flex;
justify-content: center;
}
.banner-flex img {
max-width: 100%;
}
.banner-transform {
height: 240px;
display: inline-block;
position: relative;
left: 50vw;
transform: translateX(-50%);
}
.banner-transform img {
height: 100%;
}
#media (min-width: 768px) {
.banner-flex,
.banner-transform {
height: 480px;
}
}
#media (min-width: 1200px) {
.banner-flex,
.banner-transform {
height: 680px;
}
}
#media (min-width: 1800px) {
.banner-transform img {
width: 100vw;
}
}
I would like position:fixed to only work when I'm displaying the app on a large screen. If I am in mobile, I don't want position:fixed. What is wrong with my scss? I actually just took the idea from another stackoverflow post.
.page {
overflow: hidden;
min-height: 100vh;
.sidebar {
position: fixed;
#media #{$small} {
position: relative;
}
}
}
I figured it out and it's working great!
.page {
overflow: hidden;
min-height: 100vh;
.sidebar {
#media only screen and (min-width: 400px) {
position: fixed;
}
}
}
according to zurb foundation
.page {
overflow: hidden;
min-height: 100vh;
.sidebar {
position: relative;
#media screen and (max-width: 63.9375em), screen and (min-width: 75em) {
position: fixed;
}
}
}
My media query for portrait orientation doesn't seem to work. Any ideas what I'm doing wrong, please?
html:
<div class="titleCard" id="first" style="background-color:white"></div>
css:
html, body { -webkit-backface-visibility:hidden;}
#first {
background-color: #000;
width: 100%; max-width: 1920px;
height: 100%; max-height: 1080px;
background: url('images/bg.png') no-repeat center;
background-size:cover;
position:relative;
}
.bgwidth { width: 100%; max-width: 1920px; }
.bgheight { height: 100%; max-height: 1080px; }
#media all and (orientation:portrait) {
background: url('images/Mobile_Art.jpg') no-repeat center;
}
It works (simplified test). It's just that you're not telling it for what element it should change the background when the orientation changes.
You probably meant to have something like:
#media all and (orientation: portrait) {
#first {
background: url('images/Mobile_Art.jpg') no-repeat center;
}
}
instead of:
#media all and (orientation:portrait) {
background: url('images/Mobile_Art.jpg') no-repeat center;
}