ヘッダースライダーの高さを調節し、画像がカーテンのようにスクロールする機能を無効にする。

Question

既存のCSSを編集中なのです。
heightの高さを変えるところまでは出来たのですが、そのヘッダーのサイズと同じヘッダー画像を貼っつけてもヘッダー画像が拡大されるというか、下が切れた状態になります。

あとは、カーテンのように画像がスクロールされる機能を無効にしたいのですが、どのコードを追加すればいいのかわかりません。

Wordpressのテーマは「Sydney」です。

よろしくお願いします。

<div id="slideshow" class="header-slider" data-speed="4018" style="position: relative; overflow: hidden; width: 100%; height: 646px;">

---

position: relative;
    overflow: hidden;
    width: 100%;
    height: 646px;

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、動きについては書かれている部分以外の情報が足りません。既存のCSSというのは多分テーマか何かと思うのですが、それの提示もお願いします。

[Lhankor_Mhy]

既存のCSSにbackground-sizeみたいな記述はありますか？

Answer 1

そのヘッダーのサイズと同じヘッダー画像を貼っつけてもヘッダー画像が拡大されるというか、下が切れた状態になります。

画像サイズ 1920px × 1275px を基準に作られたテーマなので、それ以下なら拡大されてしまいます。そのサイズの画像を用意するのが手早いと思います。

【Header Slider Image Size... - aThemes】
http://athemes.com/forums/topic/header-slider-image-size/

---

あとは、カーテンのように画像がスクロールされる機能を無効にしたいのですが

テーマの js/main.js の最下部にある scrolls(); を削除すれば無効に出来ます。テーマのアップデート時には元に戻される可能性が高いですが、再度削除すれば無効に出来ると思います。

	// Dom Ready
	$(function() {
		sliderFix();
		heroSection();
		headerFixed();
		testimonialCarousel();
		teamCarousel();
		counter();
		progressBar();
		detectViewport();
		responsiveMenu();
		responsiveVideo();
		rollAnimation();
		checkipad();		
		panelsStyling();
	//	scrolls(); 	// これがパララックスを起動している
		projectEffect();
		socialMenu();
		goTop();
		removePreloader();
   	});

Answer 2

divからidとclassなどのアトリビュートを削除してみたらある程度は思い通りになると思います。

<div style="position: relative; overflow: hidden; width: 100%; height: 646px;">

cssで定義されている内容とstyleアトリビュートの内容が重複しているので、こちらも不要かもしれません。