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;
Related
As of now I'm running into an issue when it comes to testing a website on iOS devices. It seems a DIV element does not carry its overflow:hidden property well. Or at all, really.
This is what the site's layout should be (with the overflow-setting working):
This is what the layout is like on an iOS device:
I've tried many things, such as editing the body and html css overflow and/or position properties, adding a wrapper around the body tag and many more 'mainstream' solutions I came across while googling. None worked, sadly.
The CSS for the item not properly working on iOS is this:
width: 94.4%;
height: 400px;
overflow: hidden;
position: relative;
margin: 0px;
display: inline-block;
box-sizing: border-box;
How'd I know (or at least think) it's the overflow? As soon as I turn it off in the browser through inspecting the element, the issue happens.
Is there anybody who can give me some insight into the issue?
If you need any more information, I'd be happy to provide.
As Demnogonis suggested in a comment to my original post, I added
vertical-align: top
And now the layout is fixed on iOS devices.
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.
Why does this jsfiddle page appear so far zoomed out when viewed on Mobile Safari on iOS 6.1? I'd expect it to take up the entire width, but it zooms way out instead. I have pretty boring CSS as follows, but I'm missing something.
.foo {
overflow: auto;
overflow-y: hidden;
height: 100px;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.foo ul li {
display: inline-block;
border: 1px blue solid;
max-width: 100px;
overflow: auto;
white-space: normal;
}
Add
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
inside the <head>
Working example (standalone)
Working example (jsfiddle)
Background: By default, mobile Safari displays pages with a canvas width of 980px (see this answer), the 'width' parameter overrides this and 'device-width' automatically sets it to whatever size (or portrait/landscape orientation) you're using. It was initially introduced by Apple but pretty much everything now supports it.
For this to work in jsFiddle, you need to add the meta tag to the CSS pane but wrap it in a </style> / <style type="text/css"> tags so it appears in the head. Also, the ordinary embed sharing link won't work, as everything is wrapped in an iframe, so you need to break out the contents of that directly: .../show/light/
(If you have a Mac, the iOS Simulator is handy for this kind of thing - requires installing XCode. Also Chrome Dev Tools > Settings (cog icon, bottom right) > Overrides > Device Metrics)
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.