I'm trying to dynamically change the background image on a jumbotron depending on my view content but I am unsure of how to do this. My code so far sticks the image inside the jumbotron as a separate element but as I say, I really want this to be the background image so that it'll scale nicer and I can central valign the image.
<div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;">
<img src="#Model.Artist.ArtistHeaderImage" alt="#Model.Artist.ArtistAlias" class="img-fluid" />
</div>
This is the sort of thing I'm trying to achieve
.jumbotron {
background-image: url("#Model.Artist.ArtistHeaderImage");
background-size: cover;
}
Ignore the inline styles - I will be moving them to a class once I've finished. Thanks
If the jumbotron is inside a layout and the individual views are inside RenderBody you could do;
Add this to your layout
<head>
...
#RenderSection("Styles", false)
</head>
Add this to your view
#section Styles {
<style>
.jumbotron {
background-image: url("#Model.Artist.ArtistHeaderImage");
background-size: cover;
}
</style>
}
Or if your jumbotron is inside the view, simply add a style tag above that element or on its header.
<style>
.jumbotron {
background-image: url("#Model.Artist.ArtistHeaderImage");
background-size: cover;
}
</style>
<div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;"></div>
Related
The issue is as follows: backgrounds do not float slowly on scroll, they just change each other smoothly, but there is no 'depth effect' as I've seen in several demos.
I would usually follow this example
http://www.youtube.com/watch?v=NUsEGbSbMZ4. So what he has is kind of plain white panel with text that shifts over steering wheel image, but wheel image moves slightly itself. This is exactly what I can't reach.
Is there any solution?
index.php
<div class="slide" id="slide1" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6"><h1></h1></div>
</div>
</div>
<a class="button" href="" title=""></a>
</div>
custom.css
.slide {
background-attachment: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
position: relative;
}
#slide1 {
background-image: url(../img/slide1/green-grapes.jpg);
background-size: cover;
}
#slide2 {
background-image: url(../img/slide2/indian-market.jpg);
background-size: cover;
}
#slide3 {
background-image: url(../img/slide3/floating-market.jpg);
background-size: cover;
}
main.js
$(function() {
$.stellar({
verticalScrolling: true,
parallaxBackgrounds: true,
responsive: true,
scrollProperty: 'scroll',
positionProperty: 'position'
}).stellar('refresh');
});
Okay, what I figured out is that I had to initialize Stellar.js by putting the following script before closing body tag:
<script>
$.stellar();
</script>
Can someone explain me why initialization in main.js file (it is linked at the bottom of index.php) did not work?
I'm having a problem with custom icons in header. Followed the instruction on demo page and worked on panel; however, still not get any clue why those in header wouldn't show up.
Here is my code http://jsfiddle.net/kukubag/z257dngf/3/
<div data-role="page" id="fpost-page" data-url="fpost-page" data-theme="f">
<div data-role="header" data-position="fixed" data-theme="f">
<span class="ui-title"></span>
</div>
.ui-iconmenu:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icmenu.png");
background-size: 22px 22px;
}
.ui-iconnew:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icnew.png");
background-size: 22px 22px;
Try adding a dash inyour custom icon names: ui-icon-menu and ui-icon-new:
.ui-icon-menu:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icmenu.png");
background-size: 22px 22px;
border-radius:0;
}
.ui-icon-new:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icnew.png");
background-size: 22px 22px;
border-radius:0;
}
Here is your updated FIDDLE
Your first URL is wrong: you wrote url("https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Chrome.png.png"); with 2 times .png
Replace with url("https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Chrome.png");
And why did you use :after in your css?
Check here: http://jsfiddle.net/nrobert/z257dngf/4/
I also added the script in the right way in the fiddle (need to be added on the left pane)
I'm using the Twenty ten theme.
I don't know if it matters, but to make the footer stretch all the way out of the page (100%), I put it outside the wrapper div, so instead of:
<wrapper>
<main>
</main>
<footer>
</footer>
</wrapper>
I've put it this way:
<wrapper>
<main>
</main>
</wrapper>
<footer>
</footer>
The css for the footer looks like this:
#footer {
height: 100px;
background:#393939;
font-size:12px;
color:#777;
margin:0;
padding:20px;
z-index:999;
bottom:0;
clear:both;
}
The footer now lays directly under all the content, so if the content of a page is too short, the footer is not in the bottom of the page, like on this page:
http://skiss.nu/hff/?page_id=10
if I add "position: absolute;" the footer stays at the bottom of this page, but it is laying over the content om pages with more content.
You need to have your position as 'fixed'.
#footer {
height: 100px;
background:#393939;
font-size:12px;
color:#777;
margin:0;
padding:20px;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}
You could add a min-height to your wrapper div like so:
wrapper {
min-height: 600px;
}
That won't look awesome on all screen sizes, but its a quick way to get the job done.
I have a position absolute div in the body of an html file. I want it to obey the body-margins. Find my code at http://jsfiddle.net/vHApr.
The following is my code:
<html>
<head>
<style type="text/css">
body{
margin: 50px;
background-color: #ddd;
color: #222;
font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
min-width: 1080px;
padding-top: 50px;
}
div.test{
position:absolute;
right:0px;
top:55px;
}
</style>
</head>
<body>
<div class="test">
TEST
</div>
</body>
</html>
Add position:relative for body – then the absolute descendant element will be aligned to the edges of body, and not to the viewport (which happens for absolutely positioned elements with no positioned ancestors).
try this
div.test{
position:absolute;
}
Updated jsFiddle http://jsfiddle.net/vHApr/3/
I'm a bit of a JQuery Mobile Noob and I've been trying to search for an answer to this, but to no avail. I've created a ui-navbar with five custom data icons. Problem is when I select one of the five links, the buttons to the left of the selected link take on the selected icon. Also, what should be the right arrow on the ul-listview element, also takes on the selected icon albeit it's hard to see. Had to use Firebug to expand that in order to see if's the selected data-icon.
Here's the code I'm using for the navbar in my footer:
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
And some of the CSS:
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(images/nav.png);
background-position: 0 0;
background-repeat: no-repeat;
}
Any idea why this might be happening? It has to be something with my styles I would think.
don't use the name ui-icon only, instead use ui-icon-something, see also the docu about custom icons
Custom Icons
To use custom icons, specify a data-icon value that has a unique name
like myapp-email and the button plugin will generate a class by
prefixing ui-icon- to the data-icon value and apply it to the button:
ui-icon-myapp-email.
You can then write a CSS rule in your stylesheet that targets the
ui-icon-myapp-email class to specify the icon background source. To
maintain visual consistency with the rest of the icons, create a white
icon 18x18 pixels saved as a PNG-8 with alpha transparency.
In this example, we're just pointing to a standalone icon image, but
you could just as easily use an icon sprite and specify the
positioning instead, just like the icon sprite we use in the
framework.
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon-taifun {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
screenshot