I have used Jquery Mobile. I have added background image like this<body background ="6.jpg">.
I want to make background image responsive. What process should i follow to make it responsive? Please Suggest.
Update
I have tried using this
body {
background: url(6.jpg) ;
background-size:cover;
}
.ui-page {
background: transparent;
background-repeat: no-repeat;
}
.ui-content{
background: transparent;
}
followed this link Stacjoverflow
but failed. Width of the image is responsive but height is getting too smaller than the original image.
You can working for example with this: http://jquerypicture.com/
The important think is (generell for responsive) you must working with media queries.
PS: Instead of seeting the background in the body tag, please use a class for this.
Related
My problem is that I cannot get media query to work on iPhone 5s iOS 9.3.2 Safari. I have a full screen video on my page what I'd like to change into an image on mobile. I have followed this tutorial to make it happen.
I have specified the viewport like this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have included !important tag in every css entry I need to be changed when being 640px, like this:
#media only screen and (max-device-width: 640px) {
html {
background: url('image.jpg') no-repeat center center fixed !important;
background-color: rgba(0, 0, 0, 0) !important;
}
#video {
display: none !important;
}
body{
background: rgba(0, 0, 0, 0) !important;
/*also tried with background:transparent !important*/
}
}
I decided to use 640px as it is the exact amount of pixels what gets rendered on iPhone 5s according to this source.
I have specified that the background should be transparent as it seems to be the only option to work around the default template style. Meaning when background becomes transparent the background image shows up.
I have read this and this. I have applied the suggested solutions to my problem but none of them worked.
NOTE: I don't have the Mac machine to test this issue via iPhone's web inspector. Making a VM on Windows seems to be not a one hour job.
I have tested my code in Chrome 50.0.2661.102 m (64-bit), Mozilla 46.0.1 and Edge on Windows Phone everything works fine.
I have tried to work with Safari 5.1.7 (the last version released for Windows), but it seems to be very outdated (as expected).
I have also cleared the cache with Ctrl+Shift+R and tried to use Incognito mode.
UPDATE: if I specify the color (for the sake of testing) before the image I will be then able to see the specified color in Safari, but no image:
background: green url('image.jpg') no-repeat center center fixed !important;
Any idea how to solve this?
While waiting for help I've found a workaround just for my case. Thanks to #daemeron's answer.
So instead of implementing separate styleheets for different devices it is just possible to hide the annoying Play button on the background by:
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none
}
This works great on iPhone and Windows 10 mobile. Exactly what I was looking for.
I'm susccesfully using background-blend-mode on my header here: https://yogrow.co/ecommerce-stack
However I've noticed that the background-blend-mode is not working on iPhone. I just get no background color.
Here is the CSS I am using
background-repeat: repeat;
background-image: url("assets/img/swirl_pattern.png");
background-color: #E33551;
background-blend-mode: multiply;
Is the only / best option to use media queries to create a new set of css rules or is there an alternative way to have a fallback so for devices like iPhone Safari that do not show the color bg the background goes to a red.
Because I have white text on top of the background it currently looks illegible on the iPhone safari.
Thanks
It seems like background-blend-mode not working with background-repeat: repeat;. Try to set background-repeat: no-repeat;.
It seems the following modes is not supported by safari for background-blend-mode:
hugh, saturation,color and luminosity
I see the author of the question did not use one of the above mentioned, but it might help someone else.
background-repeat: no-repeat worked for me, but in our application, the element in question could sometimes have a repeating background, so that solution was not sufficient. I found (in iOS 10.2) that any element with border-style set on it would not respect background-blend-mode; i.e., images and colors would not blend. Removing border-style (or any variants like border-bottom-style or border) fixed the issue.
I absolutely needed background-repeat in my design. I have a transparent PNG over a solid color (a linear-gradient layer).
The workaround isn't exactly pretty: I load UAParser.js, and test for (iOS && WebKit).
<script src='https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.21/ua-parser.min.js'></script>
<script>
window.workaroundBackgroundBlendMode = (function() {
var ua = UAParser()
var isWebKit = (ua.engine.name === "WebKit")
var isIOS = (ua.os.name === "iOS")
var debug = false //|| true
var shouldActivate = (isWebKit && isIOS) || debug;
if (shouldActivate) {
document.body.classList.add("is-ios-webkit")
}
// You can inspect this returned object afterwards
return {isWebKit, isIOS, debug, shouldActivate, ua}
})()
</script>
There will be a small lag, but I figure this is justified because it only affects the buggy clients.
My Ionic application have a detail view with transparent header. Applying CSS class "bar-clear" to my element is doing the job just fine in desktop browsers and when running the app on Android (see result here).
But when running on iOS 8 the header is white and opaque (see here).
Any idea why?
I did some research and people it got it working by setting bar-light to the header bar and then making these changes:
.bar.bar-light {
background-color: rgba(255,255,255,.66) !important; /* or transparent, or background:none */
}
.scroll-content {
overflow: visible !important;
}
See this playground: http://play.ionic.io/app/3cbf53eff565
Will it work once built? not sure but give it a go and let me know.
I've been struggling with this for a couple of hours for now, I've tried every solution that could find on the web, but nothing works.
Here is the a css file:
body{
background-image: url('/img/login-background-small.png');
background-size: 100% 100%;
background-position: 100% 100%;
}
On the livePreview in Chrome on Mac everything is showing well but when I build iOS app, simulation is not showing any image in the background.
I've tried different picture sizes, tried moving css files after and before html tag, tried removing leading / sign from image path, but nothing seems to help.
Is there an alternative way of setting background image?
Hope someone is able to help.
Try background-position: 0px 0px;.
The setting you had now, placed the image in a way that the left top-corner appears in the bottom right corner.
I have created a mobile website using the JQM themeroller
http://yellowgreenmedia.info/1/
Now i have tried everything i know to ad a background image, but no matter how i try, it doesn't wanna show up....
What is the best way to get a background image to show up?
Thanks
dave
I'm doing it like this:
body.ui-mobile-viewport,div.ui-mobile-viewport {
background-color: transparent;
background-image: url("your_image_URL");
}
I am going to guess its a CSS property that has background image set.