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!
Related
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 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.
#media #{$only-small} {
.beverages--element .inner:before{
background-image: url(....);
background-repeat: no-repeat;
}
}
I have this piece of code, it is used to style a box where a show a beverage in a list of beverages.
so far so good, up until now I've always used the same image for all the beverages. now I need to extend the logic, each beverage now has a different image. the image is stored in a cloud service and I have it's link the in the database where the beverages are stored. how can I pass the link from the view to the css?
thanks
One option you have is to set the background image inline, in the html. Like so:
<div style="background-image:(...)">mydiv</div>
Though it is recommended to use asset pipeline, you can do the following approach for smaller code.
You should use .css.erb extension for your css and let the runtime evaluate the code in CSS.
#media #{$only-small} {
.beverages--element .inner:before{
background-image: <%= #beverage_url_image %>;
background-repeat: no-repeat;
}
}
where #beverage_1_url_image should have the URL from your view.
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 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.