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.
Related
I'm having an issue describing the file path for my background image.
I read other threads where this issue was solved and read the tutorial for paths again but still cannot get my background image from my css file to appear.
The CSS file is linked correctly because I am able to change the web page's background color and font using the external CSS file.
The background image appears whenever it's embedded in my HTML file or when I put the image in the same folder as my CSS file. So I'm able to make the image appear, but I want to keep the background image in my images folder.
My folder structure is as follows:
Main folder called "wizardingworld" which contains the .html file.
One folder called "Images" contains the images.
One folder called "Styles" contains the stylesheets.
Here is my code:
#media screen and (max-width:640px) {
body {
background-image: url('/Images/Hogwarts.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
}
Thanks in advance!
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 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'm going crazy with this.
Using bootstrap for rails + less-rails gem and some styles are completely different on development and production.
Example:
a styles do have a black background-color on the hover event. I overwrote the a:hover style already via
background-color: none !important;
but it still shows up this weird black background on the hover event. Inspecting the element via Chrome does not even show this CSS style! So where does it come from?
Also, the font is different (dev vs live) and other minor things.
On the other hand, buttons and most major elements (well, lead etc etc) are working fine.
Where does this difference come from and how do I make dev versus live the same CSS appearance?
I deploy my app on heroku btw.
Thanks for any help.
I think you are using other style on your application, something like a scaffold for generator, scaffold will generate scaffold css. I'm use scaffold and i'm having scaffold.css.scss on my apps, Here's style of link on scaffold.css.scss
a {
color: #000;
&:visited {
color: #666;
}
&:hover {
color: #fff;
background-color: #000;
}
}
You should remove style of link or you can remove scaffold style on your apps if you won't it.
Twitter bootstrap do not have style link with a black background, by default.
If you don't have other style on your app and only use twitter bootstrap you should find style of link that bring about an issue
I'm working with Phonegap to develop an application for the iPhone.
I have the application design from our designer, and am trying to set the background for the index.html page. No matter what code I try, I cannot get it to display and I always end up with a white background.
I tried this but didn't work
<body style="background: url(images/bg.jpg) no-repeat;background-size: 100%;" >
I also tried creating a class in the end of the JQuery CSS file, and applying it to the main div or body of the page, that didn't work too
I even tried to override the whole body CSS, that didn't work either
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Any Ideas?
First make sure the path is correct i.e. images folder is at same path as HTML page, or at CSS level if declared in CSS. If not that try putting images/bg.jpg in single quotes, so:
<body style="background: url('images/bg.jpg') no-repeat;background-size: 100%;" >