Clip/Crop background-image with react and css - html

I have this HTML:
<div className="img" />
with this Css:
.row2 {
position: relative;
width: 1790px;
height: 983px;
background-image: url("/img.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #d0c6b5;
background-blend-mode: multiply;
#media (min-width: 375px) and (max-width: 414px) {
}
}
and i`m going to use media query to show only this part of the screen.
how can i do?


For responsive designing's you will not be able to get the exact crop for all the dimensions. However you can use px to get almost the same crop for the devices.
Mainly you have to play around the background-position attribute. See reference code below
#media (min-width: 375px) and (max-width: 414px) {
width: 350px;
height: 600px;
background-image: url('https://i.stack.imgur.com/aIWX6.png');
background-position: -950px 0;
background-size: 650px 100%;
}

Related

changing the background image for different screen size using media query is not working on the smaller screen

I have two different images. I am trying to use one of the images for small screens and the other on large screens sizes.
The image for the large screen size is displayed but that for the smaller screen size does not get displayed.
I think I am doing something wrong and hoping to find a solution.
index.html
<img loading="lazy" class="bg-big-image bg-small-image h-100" />
style.css
.bg-big-image {
background-image: url(path_to_image("211129_IKKS_LAETITIA_CASTA_02_060_V02_Mini#2x.jpg"));
width: 100%;
height: 100%;
background-size: cover;
}
#media only screen and (min-width: 992px) {
.bg-small-image {
background-image: url(path_to_image("Groupe de masques 20.jpg"));
width: 100%;
height: 100%;
background-size: cover;
}
}

you should change the min-width in media screen to max-width because you define that second image only show on screen larger than 992px your css code should be like this:
#media only screen and (max-width: 992px) {
.bg-small-image {
background-image: url(path_to_image("Groupe de masques 20.jpg"));
width: 100%;
height: 100%;
background-size: cover;
}
}

Make Background Image Responsive

Was trying to make my clickable background image responsive on all devices but can seem to wrap my head around it. It is showing well on 10" and above screen devices but on lower screen devices, the image is chopped off. I will like to make it responsive on all devices. Any heads up on this will be appreciated.
The code used is found below:
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
width: 1240px;
}
#media only screen and (max-width: 767px) {
#range-logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
}
}
<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>

Well you can change background-position to 100% as below in media query, this works fine, but this make your image as fixed background on mobile device compare to other visual result on other device.
body{
margin:0px;
}
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 800px;
width: 1240px;
}
#media screen and (max-width: 767px) {
#range-logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-size:100% 100%;
}
}
<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>

Use contain property instead of cover if you want to see full image in background.
*{
margin:0;
padding:0;
}
body,html{
width:100%;
max-width:100%;
margin:0;
padding:0;
}
#range-logo {
margin:0 auto;
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
display: block;
height: 100vh;
width: 100%;
}
#media only screen and (max-width: 767px) {
#range-logo {
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-size:100% 100%;
}
}
<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>

Try adding this to your media query:
#media only screen and (max-width: 767px) {
#range-logo {
background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
background-size:contain;
}
}

Left & Right Background CSS in div changes body content container width

I put this together to display a background on the left and right side of a website.
Now with this in place the body container is appearing much wider than it was before. Why would this be?
Can anybody see what isn't good code in the below?
div#multi-background {
width: 100%;
height: 100%;
background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
background-position: center right, top left;
background-repeat: no-repeat;
}
#media only screen and (min-width: 481px) {
//Happens when the screen size is >= 481px
div#multi-background {
width: 100%;
height: 100%;
background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
background-position: center right, top left;
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 481px) {
//Happens when the screen size is <= 481px
div#multi-background {
background-image: none;
}
}
Fiddle - http://jsfiddle.net/timsalabim/1mk097vb/8/

If I got it right, this would be the code you want:
#multi-background {
height: 700px;
background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
background-position: center right, top left;
background-repeat: no-repeat;
}
#media screen and (min-device-width: 481px) {
/*Happens when the screen size is bigger than 481px */
#multi-background {
width: 100%;
background-image: url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/right-1.png), url(http://cdn.shopify.com/s/files/1/0834/6311/t/2/assets/left-1.png);
background-position: center right, top left;
background-repeat: no-repeat;
}
}
#media screen and (max-device-width: 481px) {
/*Happens when the screen size is lower than 481px*/
#multi-background {
background-image: none;
}
}
<body><div id="multi-background"></div>
The comments were not written with "/" and "/". There were problems with #media declaration and height issues for more than 481 px.
Hope it helps.

Background image not displayed properly on iPad and iPhone

I've encountered an odd issue. I've been building this website using bootstrap3 and everything seems to work fine, until I try it on the iPad or iPhone. My background image seems to be rendered wrong. It is stretched way too much and you have to scroll 10 times until you reach the first content.
This is my website where the issue is found: www.socialook.net
Here is the CSS for the section with issues:
#home {
background: url(img/background.png) no-repeat center center fixed;
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#e6e6e6;
text-align: center;}
UPDATE: I changed height:100% instead of height:100vh and nothing really changed in ipad or iphone. The image is very zoomed.
Also, eliminating the height completely will cause the background picture to have a height of only about 5px. Any ideas?

I've found the following solution to fix the ipad and iphone problem:
/* fix for the ipad */
#media (min-device-width : 768px) and (max-device-width : 1024px) {
#home {
background-attachment: scroll;
/* default height landscape*/
height: 768px;
}
.ipadfix{
height: 300px !important;
}
img.ipadfix{
width:100% !important;
height:auto !important;
}
}
/* fix for the ipad */
#media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
#home {
/* default height landscape*/
height: 1024px;
}
}
/* fix for the iphone */
#media (min-device-width : 320px) and (max-device-width : 568px) {
#home {
background-attachment: scroll;
/* default height landscape*/
height: 320px;
}
.ipadfix{
height: 150px !important;
}
img.ipadfix{
width:100% !important;
height:auto !important;
}
}
/* fix for the iphone */
#media (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) {
#home {
/* default height landscape*/
height: 568px;
}
}

Changing height from 100vh to 100% loses the scrolling bug:
#home {
background: url(img/background.png) no-repeat center center fixed;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#e6e6e6;
text-align: center;
}
but then your background-image is still not displayed correctly. I'm looking for a way around this.
UPDATE:
This is the closest I've got in order to get the image to look 'normal':
#media (max-width: 425px) {
#home {
background-size: 100% 14% !important;
zoom:1;
}
}

CSS background-size: cover replacement for Mobile Safari

Hi I have several divs on my page which have background images that I want to expand to cover the entire div which in turn can expand to fill the width of the viewport.
Obviously background-size: cover behaves unexpectedly on iOS devices. I've seen some examples of how to fix it, but I can't make them work in my situation. Ideally I'd prefer not to add extra <img> tags to the HTML but if it's the only way then I will.
Here is my code:
.section {
margin: 0 auto;
position: relative;
padding: 0 0 320px 0;
width: 100%;
}
#section1 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section2 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section3 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
<body>
<div id="section1" class="section">
...
</div>
<div id="section2" class="section">
...
</div>
<div id="section3" class="section">
...
</div>
</body>
The question is, how can I get the background image to completely cover the section div, taking into account the variable width of the browser and the variable height of the content in the div?

I have had a similar issue recently and realised that it's not due to background-size:cover but background-attachment:fixed.
I solved the issue by using a media query for iPhone and setting background-attachment property to scroll.
For my case:
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
}
}
Edit: The code block is in LESS and assumes a pre-defined variable for #iphone-screen. Thanks for the notice #stephband.

I've had this issue on a lot of mobile views I've recently built.
My solution is still a pure CSS Fallback
http://css-tricks.com/perfect-full-page-background-image/ as three great methods, the latter two are fall backs for when CSS3's cover doesn't work.
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspect ratio */
min-width: 100%;
min-height: 100%;
}

Also posted here: "background-size: cover" does not cover mobile screen
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
Just in case, in your HTML head, something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
<div class="html-mobile-background"></div>
CSS:
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
#media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}

There are answers over the net that try to solve this, however none of them functioned correctly for me. Goal: put a background image on the body and have background-size: cover; work mobile, without media queries, overflows, or hacky z-index: -1; position: absolute; overlays.
Here is what I did to solve this. It works on Chrome on Android even when keyboard drawer is active. If someone wants to test iPhone that would be cool:
body {
background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
background-size: cover;
-webkit-background-size: cover; /* safari may need this */
}
Here is the magic. Treat html like a wrapper with a ratio enforced height relative to the actual viewport. You know the classic responsive tag <meta name="viewport" content="width=device-width, initial-scale=1">? This is why the vh is used. Also, on the surface it would seem like body should get these rules, and it may look ok...until a change of height like when the keyboard opens up.
html {
height: 100vh; /* set viewport constraint */
min-height: 100%; /* enforce height */
}

That its the correct code of background size :
<div class="html-mobile-background">
</div>
<style type="text/css">
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%; /* To compensate for mobile browser address bar space */
background: url(YOUR BACKGROUND URL HERE) no-repeat;
center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%
}
</style>

For Safari versions <5.1 the css3 property background-size doesn't work. In such cases you need webkit.
So you need to use -webkit-background-size attribute to specify the background-size.
Hence use -webkit-background-size:cover.
Reference-Safari versions using webkit

I found the following on Stephen Gilbert's website - http://stephen.io/mediaqueries/. It includes additional devices and their orientations. Works for me!
Note: If you copy the code from his site, you'll want to edit it for extra spaces, depending on the editor you're using.
/*iPad in portrait & landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}
/*iPad in landscape*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}
/*iPad in portrait*/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }

#media (max-width: #iphone-screen) {
background-attachment:inherit;
background-size:cover;
-webkit-background-size:cover;
}

I found a working solution, the following CSS code example is targeting the iPad:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
html {
height: 100%;
overflow: hidden;
background: url('http://url.com/image.jpg') no-repeat top center fixed;
background-size: cover;
}
body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
Reference link: https://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad

html body {
background: url(/assets/images/header-bg.jpg) no-repeat top center fixed;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
}