0
私はコード、ウェブなどではかなり新しいですが、私はロープを学んでいます。今、私はWPテンプレートを持っていますし、style.cssのコードを使用してホーム内のメインスライドショーをフルスクリーンに修正しようとしています。全画面の背景画像WPのスライドショー
私はFullscreen Background Image Slideshow with CSS3とPerfect Full Page Background Imageという2つのチュートリアルを見つけましたが、実際にコードを配置する方法はわかりません。私は、私は唯一のCSSソリューションを使用する必要があることを知っています。
#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);
}
任意のアイデア、チュートリアルやヒント：
そうであるstyle.cssに私はこのコードを持っていますか？どうもありがとうございました。
編集：HTMLコード（テーマのデモページから）
<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>
役立つと期待していますあなたが現在持っているものの実例で、あなたが探していることをやり遂げるためにそれを試して修正することができるようにする – labago
まず、私の質問に時間を取ってくれてありがとう。 私は地元にウェブを持っていますが、ここには[テーマのデモページ]（http://mariusn.com/themes/reales-wp/）のコードがあります。著者によって与えられたスライドショーについて とドキュメント：メディアへ 1.>管理者のメインメニューから[新規の追加： ホームページのスライドショーホームページのスライドショーに画像を追加し、次の手順に従うために 。 2.コンピュータから画像をアップロードします。 3. [編集]をクリックし、[スライドショーで表示]オプションをオンにします。 4. [更新]をクリックします。 – irek19