I have a website in which for the mobile view I want different image and for the desktop view, I want another one.
For the desktop view, the following HTML/CSS code is working perfectly fine:
HTML:
<div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular">
</div>
CSS:
div.et_pb_section.et_pb_section_0 {
background-image: url(/wp-content/uploads/2018/05/contactusheader-2-min.jpg)!important;
}
What I am trying to achieve now for the mobile view, I want the following CSS to be called but I am not sure why the following background image is not getting called in the mobile view.
#media only screen and (max-width: 767px)
{
.demo-request-backgroundimage
{
background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
}
}
you want to change .et_pb_section.et_pb_section_0 img so in media-query use :
see jsFiddle:https: https://jsfiddle.net/smuf3c3t/
.et_pb_section.et_pb_section_0 {
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)!important;
width:500px;
height:500px;
}
#media only screen and (max-width: 767px)
{
.et_pb_section.et_pb_section_0
{
background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
}
}
<div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular">
</div>
EDIT TO COMMENT FROM YOUR WEBSITE:
look what happened when I resize:
SO remove the !IMPORTANT
It's because you are using more specificity outside of the media query. Try:
#media only screen and (max-width: 767px) {
div.et_pb_section.et_pb_section_0 {
background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
}
}
try it with multiple classname
One Class for Normal Css
and
Other For Media Queries
#media only screen and (max-width: 767px)
{
div.demo-request-backgroundimage
{
background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
}
}
Related
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%;
}
I am working on one page website and I set one background image for all sections using a div like the following :
<div style="background-image: url(./img/12.jpg)" class="sec">
</div>
in css my code is the following :
.sec{
background-repeat: no-repeat;
background-size:cover;
}
all is working fine but the mobile doesn't look pleasant to me so i tried to add different background image url to my css with no luck like the following :
#media only screen and (max-width: 600px) {
.sec{
background-repeat: no-repeat;
background-size:cover;
background-image: url(/img/1255.jpg);
}
}
I just want to know which part I am missing and why I cant have 2 different images for different resolution
You are having this problem because inline css overrides internal/external css, see here.
Change your code to
<div class="sec">
</div>
and
.sec{
background-repeat: no-repeat;
background-size:cover;
background-image: url(./img/12.jpg)
}
#media only screen and (max-width: 600px) {
.sec{
background-repeat: no-repeat;
background-size:cover;
background-image: url(/img/1255.jpg);
}
}
The style property in thr div gains precedence over the CSS one so probably that's the reason why the second image won't come. It'd be better to do it all in CSS. Check the example below.
.sec {
// You can ignore the height and width
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
}
#media only screen and (max-width: 400px) {
.sec {
background-image: url('https://fsb.zobj.net/crop.php?r=TQ17OTvRvqIRq6m-kcLMlU-g68IHkNtXYQ5B3j9twk_CkS6zM7rH_C-OzOS4iVM6pDE9P2fHuo3Swz1_qVGWT7gRAIxzDby0x7rrCtfroFsHSC7aau-HbAFN7i6SGowXNJmowCJGeoUz5S-Uj16rIKacUVpvxTXLR4YhxW2NK_BXHJErHMF1oh7lD4k');
}
}
<div class="sec"></div>
you can do same way just add background-image: url(/img/1255.jpg)!important in the mobile device.
I have a webpage that utilizes parallax. Here's the parallax code in CSS:
.parallaxOne {
background-image: url("img.JPG");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I'd like for that to be disabled when the user is on a mobile phone. This is what I've done:
#media (max-width: 768px) {
.parallaxOne {
background-image: url("1.JPG");
background-size: 100%;
}
}
I want a lot of other stuff to be changed as well, but I figure that'll follow after figuring this out.
I got this from another post:
#media (max-width: 768px) {
//stuff
}
It didn't quite solve my problem in this exact situation, but perhaps I'm using it wrong. Thanks for any and all help.
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;
}
}
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;
}
}