There is a lot of code in this one, so I'm going to put it in a codepen.
https://codepen.io/anon/pen/WMyQEJ
Basically I am using #media queries to extend the #about div to be taller as my content is literally going into another div on mobile devices. I need the blue background to extend below the placeholder image so it's all in the same section.
Media Query:
/*MOBILE SUPPORT*/
#media screen and (max-width: 768px) {
#about {
height: 120vh !important;
background: rgb(12, 18, 71);
background-size: cover;
}
}
Change the height to auto
/*MOBILE SUPPORT*/
#media screen and (max-width: 768px) {
#about {
height: auto !important;
background: rgb(12, 18, 71);
background-size: cover;
}
}
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 trying to use #media to change te background image of my website
Somehow when I use #media (orientation: landscape) is works fine but when I use min and max width is doesn't show any background
I inserted
<meta name="viewport" content="width=device-width, initial-scale=1">
in the page that uses the css file.
#media screen and (min-width: 1501px) and (max-width: 6000px) {
body {
/* this one doesn't work*/
background: url(/afbeeldingen/overzichtskaart.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}
#media screen (max-width: 1500px) and {
body {
/* this one doesn't work*/
background: url(/afbeeldingen/overzichtskaart_laptop.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}
#media (orientation: landscape) {
body {
/* this one does work*/
background: url(/afbeeldingen/overzichtskaart_laptop.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}
I don't want to use the landscape option but change backgrounds based on the width size.
Its just because you are not writing your css properly. Below example might be helpful for you.
#media screen and (min-width:1501px) and (max-width:6000px) {
h1{
background-color:red;
}
}
#media only screen and (max-width: 1500px) {
h1 {
background-color:green;
}
}
<h1>This is test</h1>
The syntax you are using is wrong. The correct syntax is #media only screen and (min-width: 1501px) and (max-width: 6000px) and #media only screen and (max-width: 1500px).
Try this:
#media only screen and (min-width: 1501px) and (max-width: 6000px) {
body {
background: url(https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 1500px) {
body {
background: url(https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
background-repeat: no-repeat;
}
}
Refer: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Hope it helps. Cheers!
If you are using that commenting syntax in your original CSS, this might be part of the cause for your troubles: // at the start of the line won't work for comments in CSS. Comments in CSS have to be writte as /* ... your code ... */.
And your second CSS rule shouldn't have #media screen (max-width: 1500px) and {... as a selector, but instead #media screen and (max-width: 1500px) {... (i.e. wrong order)
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;
}
}
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.
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;
}
}