0
Ich bin ziemlich neu in Code, Webs, etc ... aber ich lerne die Seile. Im Moment habe ich eine WP-Vorlage und versuche, die Haupt-Slideshow in Home auf Vollbild mit dem Code in style.css zu fixieren.Vollbild Hintergrundbild Diashow in WP
Ich habe zwei Tutorials gefunden: Fullscreen Background Image Slideshow with CSS3 und Perfect Full Page Background Image, aber ich weiß nicht, wie ich meinen Code in die Praxis umsetzen kann. Ich weiß, dass ich eine Nur-css Lösung verwenden muss.
Also, in style.css ich habe diesen Code:
#hero-container {
background-color: #FFF;
height: 600px;
position: relative;
}
#page-hero-container {
background-color: #333;
height: 300px;
position: relative;
}
.page-hero {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
height: 300px;
}
#slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
}
#slideshow > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
}
.slideshowShadow {
position: absolute;
z-index: 5;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
}
Jede Idee, Tutorial oder Tipp? Vielen Dank.
Edit: HTML-Code (aus der Theme Demo-Seite)
<div id="hero-container">
<div id="slideshow">
<div style="display: block; background-image: url("http://mariusn.com/themes/reales-wp/wp-content/uploads/2014/12/bg-4.jpg");"></div><div style="display: none; background-image: url("http://mariusn.com/themes/reales-wp/wp-content/uploads/2014/12/bg-3.jpg");"></div><div style="display: none; background-image: url("http://mariusn.com/themes/reales-wp/wp-content/uploads/2014/12/bg-1.jpg");"></div><div style="display: none; background-image: url("http://mariusn.com/themes/reales-wp/wp-content/uploads/2014/12/bg-6.jpg");"></div><div style="display: none; background-image: url("http://mariusn.com/themes/reales-wp/wp-content/uploads/2014/12/bg-5.jpg");"></div></div>
<div class="slideshowShadow"></div>
<div class="home-header">
<div class="home-logo osLight">
<a href="http://mariusn.com/themes/reales-wp/">
<span class="fa fa-home"></span> Reales WP </a>
</div>
<div class="topUserWraper">
<a href="#" class="userNavHandler"><span class="icon-user"></span></a>
<div class="user-nav">
<ul>
<li><a href="#" data-toggle="modal" data-target="#signup">Sign Up</a></li>
<li><a href="#" data-toggle="modal" data-target="#signin">Sign In</a></li>
</ul>
</div>
</div>
<div class="modal fade" id="signin" role="dialog" aria-labelledby="signinLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="signinLabel">Sign In</h4>
</div>
<div class="modal-body">
<form role="form" id="userLoginForm" method="post">
<div class="signinMessage" id="signinMessage"></div>
<div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div><iframe name="fb_xdm_frame_http" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" id="fb_xdm_frame_http" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="http://staticxx.facebook.com/connect/xd_arbiter.php?version=42#channel=f13e419e9d4375c&origin=http%3A%2F%2Fmariusn.com" style="border: none;"></iframe><iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="https://staticxx.facebook.com/connect/xd_arbiter.php?version=42#channel=f13e419e9d4375c&origin=http%3A%2F%2Fmariusn.com" style="border: none;"></iframe></div></div><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div></div></div></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 743545722392313,
status : true,
cookie : true,
xfbml : true,
version : 'v2.1'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="form-group">
<div class="btn-group-justified">
<a href="#" class="btn btn-lg btn-facebook" id="fbLoginBtn"><span class="fa fa-facebook pull-left"></span><span class="signinFBText">Sign In with Facebook</span></a>
</div>
</div>
<div class="form-group">
<div class="btn-group-justified">
<a href="#" class="btn btn-lg btn-google" id="googleSigninBtn"><span class="fa fa-google-plus pull-left"></span><span class="signinGText">Sign In with Google</span></a>
</div>
</div>
<div class="signOr">OR</div>
<div class="form-group">
<input type="text" name="usernameSignin" id="usernameSignin" placeholder="Username" class="form-control">
</div>
<div class="form-group">
<input type="password" name="passwordSignin" id="passwordSignin" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<div class="checkbox custom-checkbox"><label><input type="checkbox" id="rememberSignin" name="rememberme" value="forever"><span class="fa fa-check"></span> Remember me</label></div>
</div>
<div class="col-xs-6 align-right">
<p class="help-block"><a href="#" class="text-green forgotPass">Forgot password?</a></p>
</div>
</div>
</div>
<input type="hidden" name="signinRedirect" id="signinRedirect" value="">
<input type="hidden" id="securitySignin" name="securitySignin" value="43d31cbed1"><input type="hidden" name="_wp_http_referer" value="/themes/reales-wp/"> <div class="form-group">
<div class="btn-group-justified">
<a href="#" class="btn btn-lg btn-green" id="submitSignin">Sign In</a>
</div>
</div>
<p class="help-block">Don't have an account? <a href="#" class="modal-su text-green">Sign Up</a></p>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="signup" role="dialog" aria-labelledby="signupLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="signupLabel">Sign Up</h4>
</div>
<div class="modal-body">
<form role="form" id="userSignupForm" method="post">
<div class="signinMessage" id="signupMessage"></div>
<div class="form-group">
<div class="checkbox custom-checkbox"><label><input type="checkbox" id="register_as_agent" name="register_as_agent" value="1"><span class="fa fa-check"></span> Register me as agent</label></div>
</div>
<div class="form-group">
<input type="text" name="usernameSignup" id="usernameSignup" placeholder="Username" class="form-control">
</div>
<div class="form-group">
<input type="text" name="firstnameSignup" id="firstnameSignup" placeholder="First Name" class="form-control">
</div>
<div class="form-group">
<input type="text" name="lastnameSignup" id="lastnameSignup" placeholder="Last Name" class="form-control">
</div>
<div class="form-group">
<input type="text" name="emailSignup" id="emailSignup" placeholder="Email Address" class="form-control">
</div>
<div class="form-group">
<input type="password" name="pass1Signup" id="pass1Signup" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<input type="password" name="pass2Signup" id="pass2Signup" placeholder="Confirm Password" class="form-control">
</div>
<div class="form-group">
<p class="help-block"><a href="#" class="text-green forgotPass">Forgot password?</a></p>
</div>
<input type="hidden" id="securitySignup" name="securitySignup" value="df86450b85"><input type="hidden" name="_wp_http_referer" value="/themes/reales-wp/"> <div class="form-group">
<div class="btn-group-justified">
<a class="btn btn-lg btn-green" id="submitSignup">Sign Up</a>
</div>
</div>
<p class="help-block">Already a member? <a href="#" class="modal-si text-green">Sign In</a></p>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="forgot" role="dialog" aria-labelledby="forgotLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="forgotLabel">Forgot Password</h4>
</div>
<div class="modal-body">
<form role="form" id="userForgotPassForm" method="post">
<div class="forgotMessage" id="forgotMessage"></div>
<div class="form-group forgotField">
<input type="text" name="emailForgot" id="emailForgot" placeholder="Username or Email address" class="form-control">
</div>
<input type="hidden" id="securityForgot" name="securityForgot" value="0a8e250326"><input type="hidden" name="_wp_http_referer" value="/themes/reales-wp/"> <div class="form-group forgotField">
<div class="btn-group-justified">
<a href="#" class="btn btn-lg btn-green" id="submitForgot">Get New Password</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="resetpass" role="dialog" aria-labelledby="resetpassLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="resetpassLabel">Reset Password</h4>
</div>
<div class="modal-body">
<form role="form" id="userResetPassForm" method="post">
<div class="resetPassMessage" id="resetPassMessage"></div>
<div class="form-group">
<input type="password" name="resetPass_1" id="resetPass_1" placeholder="New Password" class="form-control">
</div>
<div class="form-group">
<input type="password" name="resetPass_2" id="resetPass_2" placeholder="Confirm Password" class="form-control">
</div>
<p class="help-block">Hint: The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ %^&).</p>
<input type="hidden" id="securityResetpass" name="securityResetpass" value="9b513fc7f8"><input type="hidden" name="_wp_http_referer" value="/themes/reales-wp/"> <div class="form-group">
<div class="btn-group-justified">
<a href="#" class="btn btn-lg btn-green" id="submitResetPass">Reset Password</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="searches-modal" role="dialog" aria-labelledby="searches-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="fa fa-close"></span></button>
<h4 class="modal-title" id="searches-label">My Searches</h4>
</div>
<div class="modal-body"></div>
<input type="hidden" name="modal-user-id" id="modal-user-id" value="0">
<input type="hidden" id="securityDeleteSearch" name="securityDeleteSearch" value="7d1397b1b2"><input type="hidden" name="_wp_http_referer" value="/themes/reales-wp/"> <div class="modal-footer">
<a href="javascript:void(0);" data-dismiss="modal" class="btn btn-gray">Close</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="propertyModal" role="dialog" aria-labelledby="propertyLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="save_response">
<div class="alert alert-danger alert-dismissible fade in" role="alert">
<div class="icon"><span class="fa fa-ban"></span></div>
<button type="button" class="close close-modal" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
Agent account needed! </div>
</div>
</div>
</div>
</div>
</div> <a href="javascript:void(0);" class="top-navHandler visible-xs"><span class="fa fa-bars"></span></a>
<div class="top-nav" style="height: auto;">
<div class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-225" class="xxx menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-225"><a href="http://mariusn.com/themes/reales-wp/">Home</a></li>
<li id="menu-item-556" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-556"><a href="#">Properties <span class="fa fa-angle-down"></span></a>
<ul class="sub-menu">
<li id="menu-item-555" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-555"><a href="http://mariusn.com/themes/reales-wp/search-results/?search_city=San+Francisco&search_lat=37.7749295&search_lng=-122.41941550000001&search_category=0&search_type=0&search_min_price=&search_max_price=">Properties List</a></li>
<li id="menu-item-557" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-557"><a href="http://mariusn.com/themes/reales-wp/properties/elegant-apartment/">Single Property</a></li>
<li id="menu-item-558" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-558"><a href="http://mariusn.com/themes/reales-wp/search-results/?search_city=San+Francisco&search_lat=37.7749295&search_lng=-122.41941550000001&search_category=0&search_type=0&search_min_price=&search_max_price=">Search by City</a></li>
<li id="menu-item-559" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-559"><a href="http://mariusn.com/themes/reales-wp/search-results/?search_city=San+Francisco&search_lat=37.7749295&search_lng=-122.41941550000001&search_category=29&search_type=0&search_min_price=&search_max_price=">Search by Category</a></li>
<li id="menu-item-560" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-560"><a href="http://mariusn.com/themes/reales-wp/search-results/?search_city=San+Francisco&search_lat=37.7749295&search_lng=-122.41941550000001&search_category=0&search_type=10&search_min_price=&search_max_price=">Search by Type</a></li>
<li id="menu-item-561" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-561"><a href="http://mariusn.com/themes/reales-wp/search-results/?search_city=San+Francisco&search_lat=37.7749295&search_lng=-122.41941550000001&search_category=0&search_type=0&search_min_price=&search_max_price=700000">Search by Price</a></li>
</ul>
</li>
<li id="menu-item-2459" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2459"><a href="#">IDX <span class="fa fa-angle-down"></span></a>
<ul class="sub-menu">
<li id="menu-item-2460" class="menu-item menu-item-type-post_type menu-item-object-ds-idx-listings-page menu-item-2460"><a href="http://mariusn.com/themes/reales-wp/idx/listings/idx-test/">dsIDXpress Listings</a></li>
<li id="menu-item-2461" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2461"><a href="http://mariusn.com/themes/reales-wp/dsidxpress-single-listing-shortcode/">dsIDXpress Single Listing Shortcode</a></li>
<li id="menu-item-2462" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2462"><a href="http://mariusn.com/themes/reales-wp/dsidxpress-listings-shortcode/">dsIDXpress Listings Shortcode</a></li>
</ul>
</li>
<li id="menu-item-562" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-562"><a href="#">Agents <span class="fa fa-angle-down"></span></a>
<ul class="sub-menu">
<li id="menu-item-5446" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5446"><a href="http://mariusn.com/themes/reales-wp/our-agents/">Agents List</a></li>
<li id="menu-item-563" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-563"><a href="http://mariusn.com/themes/reales-wp/agents/jane-smith/">Agent Page</a></li>
</ul>
</li>
<li id="menu-item-5449" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5449"><a href="http://mariusn.com/themes/reales-wp/customers/">Customers</a></li>
<li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a href="http://mariusn.com/themes/reales-wp/blog/">Blog</a></li>
<li id="menu-item-564" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-564"><a href="#">Features <span class="fa fa-angle-down"></span></a>
<ul class="sub-menu">
<li id="menu-item-578" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-578"><a href="http://mariusn.com/themes/reales-wp/front-end-property-submission/">Front-end Property Submission</a></li>
<li id="menu-item-588" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-588"><a href="http://mariusn.com/themes/reales-wp/reales-wp-custom-widgets/">Custom Widgets</a></li>
<li id="menu-item-595" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-595"><a href="http://mariusn.com/themes/reales-wp/reales-wp-shortcodes/">Reales WP Shortcodes</a></li>
</ul>
</li>
<li id="menu-item-519" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-519"><a href="http://mariusn.com/themes/reales-wp/contact-us/">Contact Us</a></li>
</ul></div> </div>
</div><div class="home-caption">
<h1 class="home-title">NOW IT'S EASY TO FIND YOUR FUTURE HOME</h1>
<div class="home-subtitle">WITH REALES WP - REAL ESTATE WORDPRESS THEME</div>
<a href="#" class="btn btn-lg btn-black">Learn More</a>
</div>
<div class="search-panel">
<form class="form-inline" id="searchPropertyForm" role="search" method="get" action="http://mariusn.com/themes/reales-wp/search-results/">
<input type="hidden" name="sort" id="sort" value="newest">
<div class="form-group">
<input type="text" class="form-control auto" id="search_city" name="search_city" placeholder="City" autocomplete="off">
<input type="hidden" name="search_lat" id="search_lat">
<input type="hidden" name="search_lng" id="search_lng">
</div>
<div class="form-group hidden-xs adv">
<a href="javascript:void(0);" data-toggle="dropdown" class="btn btn-white dropdown-toggle">
<span class="dropdown-label">Category</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-select">
<li class="active"><input type="radio" name="search_category" value="0" checked="checked"><a href="javascript:void(0);">Category</a></li>
<li><input type="radio" name="search_category" value="29"><a href="javascript:void(0);">Apartment</a></li>
<li><input type="radio" name="search_category" value="30"><a href="javascript:void(0);">House</a></li>
<li><input type="radio" name="search_category" value="31"><a href="javascript:void(0);">Land</a></li>
</ul>
</div>
<div class="form-group hidden-xs adv">
<a href="javascript:void(0);" data-toggle="dropdown" class="btn btn-white dropdown-toggle">
<span class="dropdown-label">Type</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-select">
<li class="active"><input type="radio" name="search_type" value="0" checked="checked"><a href="javascript:void(0);">Type</a></li>
<li><input type="radio" name="search_type" value="10"><a href="javascript:void(0);">For Rent</a></li>
<li><input type="radio" name="search_type" value="11"><a href="javascript:void(0);">For Sale</a></li>
</ul>
</div>
<div class="form-group hidden-xs adv">
<div class="input-group">
<div class="input-group-addon">$</div>
<input class="form-control price" type="text" name="search_min_price" id="search_min_price" placeholder="Min price">
</div>
</div>
<div class="form-group hidden-xs adv">
<div class="input-group">
<div class="input-group-addon">$</div>
<input class="form-control price" type="text" name="search_max_price" id="search_max_price" placeholder="Max price">
</div>
</div>
<div class="form-group">
<input type="submit" id="searchPropertySubmit" class="btn btn-green" value="Search">
<a href="javascript:void(0);" class="btn btn-o btn-white pull-right visible-xs" id="advanced">Advanced Search <span class="fa fa-angle-up"></span></a>
</div>
</form>
</div>
</div>
Es wäre hilfreich, den HTML-Code zu schreiben und möglicherweise eine Arbeitsbeispiel von dem, was Sie gerade haben, so dass wir es versuchen und modifizieren können, um das zu tun, was Sie suchen – labago
Zunächst einmal danke, dass Sie Ihre Zeit mit meiner Frage genommen haben. Ich habe das Web in lokaler, aber hier sind Sie den Code von der [Demo-Seite aus dem Thema] (http://mariusn.com/themes/reales-wp/). und Dokumentation über Diashow vom Autor angegeben: Homepage Diashow Um Bilder auf der Homepage Diashow folgen die nächsten Schritte hinzuzufügen: von Admin Hauptmenü 1. Gehen Sie auf Medien> Neu hinzufügen. 2. Laden Sie ein Bild von Ihrem Computer hoch. 3. Klicken Sie auf "Bearbeiten" und aktivieren Sie die Option "In Diashow anzeigen". 4. Klicken Sie auf Aktualisieren. – irek19