Good day!
This line of CSS Code is working fine using the other browser. But whenever I tried to run the code using safari. The image doesn't show nicely. Some thread said explains that I must use media query for iPhone: Example code below of Iphone Media Query
#media (max-width: #iphone-screen) {
background-attachment: scroll;
}
But that code doesn't work properly. Can anyone help me how can I fix this?
This is my Code:
#video {
background: url("images/sample_8.jpg");
-webkit-background-size: cover;
background-size: cover;
background-repeat:no-repeat;
background-position: center;
background-attachment:fixed;
position: relative;
color: #999;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
You can try background-size:contain; for iphone:
#media (max-width: #iphone-screen) {
background-size:contain;
}
Related
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.
I have a one page website that displays background images in several divs. I used background-attachment: fixed to give it a pseudo parallax scrolling effect.
It works perfectly on the desktop. I now know that this doesn't work on the iPhone, so I removed this code from the iPhone version using a media query. (I can live with a fallback.) On the iPhone 5, the background images scale up to an unrecognizable view — so big that it is just pixels.
How can I resize the images so that they fit the phone's browser window? I have looked everywhere for an answer.
I removed all media queries. I even removed the background-attachment: fixed property to no avail. Here's a link to where the site is: http://www.mywebdesignstudio.net/danielleb_KKC (I put back the background-attachment: fixed) If you look at it on an iPhone 5, the photos are too big. This works on the desktop, laptop, and tablet, but not on the phone--hence the media queries to swap out the photo to see if it would work. Feel free to look at the page source for the entire code.
Here's the CSS code:
#viewport{
zoom: 1.0;
width: device-width;
}
body, html {
height: 100%;
margin: 0;
font: 1em/1.8 "Arial", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("pic4ghost.png");
min-height: 100%;
}
.bgimg-2 {
background-image: url("radio.png");
min-height: 550px;
}
#media only screen and (max-width: 767px){
.bgimg-1 {
background-image: url("pic4ghostMOBILE.png");
min-height: 100%;
}
.bgimg-2 {
background-image: url("radioMOBILE.png");
min-height: 400px;
}
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px){
.bgimg-1, .bgimg-2 {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.bgimg-1 {
background-image: url("pic4ghostsmartphone.png");
}
.bgimg-2 {
background-image: url("radiosmartphone.png");
}
use this and delete all other codes
.bgimg-1 {
background:url("pic4ghost.png") no-repeat center center fixed;
background-size:cover;
}
delete all other classes and media queries
Have you tried using the background-size: property?
Here is a code example. Please notice the first declared background will be on top of the rest.
// Gradient, image and flat color as a fallback;
.bgimg-1 {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)), url("paper.gif"), black;
background-size: auto, cover, auto;
}
I used the standard syntax, because CSS3 is common practice on this days, If you have some need for backwards compatibility, check [caniuse.com]
I am trying to change my background to grayscale, but not the title or description on top of it.
I am using Drupal as a CMS, and amending the CSS files in the directory. The theme is Color Glass. I did originally open this in Drupal Stack Exchange, but it was closed and I've been advised to open it in normal Stack Exchange.
This is the section of code in question:
.home-welcome {
background-image: url(images/css-header-header-amic-main-background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 650px;
font-family: roboto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.home-welcome .main-title {
margin-top: 145px;
font-size: 10em;
font-family: roboto;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.home-welcome .main-desc {
margin-top: 5px;
font-size: 1.5em;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
The weird thing is, that if I do the background-image colour, and the description and title in grayscale, that works. Just not the other way around.
I have also tried using filter: none, but that doesn't work either.
http://www.ubereadoolische.com/drupal3/
If I could change my html then I could follow the instructions on http://codepen.io/aniketpant/pen/DsEve - but it has to be a CSS amendment, as I can only change the CSS in Drupal (the code is written in PHP which I do not understand). There is no way for me to amend the HTML.
Can anyone help?
Thanks James
ps Please ignore my utterly incomplete site.
I think you can make it work with your current HTML structure. There is already a div present in your structure (.bkg-overlay), which you can use for your background image. I tested the following successfully in Chrome:
.home-welcome {
font-family: roboto;
min-height: 650px;
position: relative;
}
.bkg-overlay {
background-image: url(images/css-header-header-amic-main-background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 650px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-moz-filter: grayscale(100%);
position: absolute;
width: 100%;
z-index: -1;
}
As you can see, most of your CSS code which was originally applied to .home-welcome is now applied to .bkg-overlay. The .home-welcome div is, position-wise, now the reference for its children divs (position: relative), so the .bkg-overlay can be placed on top of it by applying position: absolute. Last, the .bkg-overlay div is told to appear below every other div by setting a negative z-index: z-index: -1.
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;
}