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.
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 have an html page with a button and I want to get rid of its padding. The obvious
padding: 0px !important;
didn't work. Writing
-webkit-appearance: none;
padding: 0px;
did, but it got rid of all the other iOS-like formatting.
Everything works fine on desktop. This happens on iOS. I haven't tested Android.
Is there any way to change just the padding without everything else? Is there any way to save a copy of the style so that I can restore it? I'm happy with javascript-based solutions (including d3, for any difference that makes).
My current solution (which I am not happy with) is approximately the following javascript/d3:
button.style('padding','0px');
if (button.style('padding-left')!='0px') {
button.style('-webkit-appearance', 'none')
.style('padding', '0px')
.style('background', 'linear-gradient(white,#999)')
.style('border-radius', '10px');
}
Which makes the button look kind of like an iOS button, but not really, and does nothing on desktop chrome or firefox, though I'm not sure there isn't a browser this will break.
I am using Bootstrap on an MVC 5 project.
In the bootstrap CSS file, I have an image as a background on the banner. It is not displaying on the server (displays fine on my dev machine).
.navbar-brand {
float: left;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
background: url('../Content/Images/logo_combined_trans.gif') no-repeat left;display:block;
}
Additional observations:
1) The image displays perfectly on my development machine. Once I publish the files on the server, however, everything else works, except the image does not display.
2) I put the same image in the body of a View in an img tag and it displayed correctly too.
3) Interestingly when I inspected the element it looked like the background property of the CSS is not being read at all, the rest of the properties (float, padding....line-height show correctly).
I tried the following:
1) I gave the DefaultAppPool 'read' access to the Content and Images directories. Still no go.
Is there anything else that needs to be set on the server?
Thanks.
Ok I know what the problem was. I had a bootstrap.min.css which did not have the modifications that I had made to the orignal bootstrap.css. After I removed the min file from the server everything worked.
Also, I tried several versions of the URL and all of the above worked including the original version:
1) background: url('../Content/Images/logo_combined_trans.gif') no-repeat left;display:block;
2) background: url('~/Content/Images/logo_combined_trans.gif') no-repeat left;display:block;
3) background: url('Content/Images/logo_combined_trans.gif') no-repeat left;display:block;
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!
I'm running Ruby 2.2.2, Rails 4.2.2, RVM, Development Mode.
I bought this Twitter Bootstrap template off Wrapbootstrap.com, https://wrapbootstrap.com/theme/stamp-responsive-startup-theme-WB0M409X7
and I'm using this version of it, Home Style Two
http://templateocean.com/stamp/image-bg/2-home-style-two/index.html
I put all the images in the assets/images folder, then all the rest of the css and js and html files in the vender folder.
I can't get the background image to appear. I can get all other images to appear, just not this background one. The reference is in styles.css, line 497
.header {
background: url(../images/background-images/1.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
background-size: cover;
I have tried changing styles.css to styles.css.scss and also to styles.scss. Then I have tried changing the code to the following:
background: image-url('background-images/background.jpg') no-repeat center top fixed;
It's madness. Any ideas?
Of all the lame things. I was looking for the needle in the haystack and it was the haystack all along. I did not have a closing tag. And that was creating all the trouble.