#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.
Related
I'm designing mockups in Sketch, and I'm using the home and search icons from a UI Font designed for icons. Now I want to display these icons in my angular app using html and css. There doesn't seem to be any resource online that teaches how to do this. I have used resources such as FontAwesome before which have very clear documentation on how this is done.
I got it to work by copying the CSS attributes of the icon inside of sketch by right clicking:
/* home: */
font-family: UIFont-Solid;
font-size: 30px;
color: #FFFFFF;
So add this to your css:
.icon {font-family: UIFont-Solid; font-size: 30px; color: #FFFFFF;}
Then all you have to do in the html/view is add the class to the element and put the name of the icon as text inside of the element:
<div class="icon">home</div>
You can even put multiple icons in the same div:
<div class="icon">home search help</div>
Note that this may not work in production unless you add the font to the fonts folder and reference it in the css using #font-face.
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.
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;
Is it possible to add an icon of some kind next to a jQuery Mobile select menu in the image below? If so, what would be the image size required? Thanks in advance!
You can add icons to just about anything by adding the following parameters to the element you want to icon to appear within:
data-icon="arrow-l" data-iconpos="left"
Where arrow-l specifies an arrow pointing left.
If you want to specify your own icon/image rather than use one provided by jQuery Mobile, then you can add an image inside the li (before your text), with a class of either ui-li-icon or ui-li-thumb :
<li>
<img src="images/gf.png" alt="France" class="ui-li-icon">
Social Triangle
</li>
ui-li-icon, appears to be restricted to 16px X 16px, and uses the following css conditions:
ui-li-icon {
max-height: 16px;
max-width: 16px;
}
ui-li-thumb, appears to be restricted to 80px X 80px, and uses the following css conditions:
.ui-li-thumb {
max-height: 80px;
max-width: 80px;
}
If you take a look at the above links to the jQuery Mobile documentation, it shows you how to use them in more detail, just check the source:
I am able to remove the left nav bar with this code:
.ms-nav {width: 0px;}
.ms-navframe {display:none;}
.ms-quicklaunchouter{width:0px;}
.ms-recyclebin {display:none;}
.ms-TitleAreaFrame {display:none;}
.ms-titlearealeft {display:none;}
.ms-titlearea {display:none;}
.ms-pagetitle {display:none;}
but it adds a left space that takes up half of the page to my edit/create/view all content pages/check-in/etc. I was able to fix this with a Content Editor Web Part (CEWP), but I would like to know if there is a way to do this in a .css file to use throughout the entire site. I have over 100 pages and would rather not have to add a CEWP to each page.
Thanks For The Help.
How about:
.ms-leftareacell {background-color:#D6E8FF;}
.ms-nav {display:none;}
And yes, you can create a CSS file and upload it to Style Library. Then go into Site Settings > Master Page (under Look and Feel) and have Alternate CSS URL point to your CSS file in the Style Library.
The accepted solution is good, but you can get a better result like this:
.ms-nav { display:none; }
.ms-leftareacell {
background-color: #83B0EC;
background-image: url("/_layouts/images/navshape.jpg");
background-repeat: no-repeat;
background-position: -143px 0px;
}