Jump to content
  • 0

Фиксированный фон. Как это сделано?


Светлана Г.
 Share

Question

Здравствуйте!

Имеется сайт с большой фоновой картинкой. Сначала я ее сделала масштабируемой с помощью свойства background-size: cover; Но оказалось, что при очень больших размерах картинка масштабируется некрасиво - получается размытой.

Нашла пример сайта, как можно было было бы решить эту проблему здесь: http://themeforest.net/item/vierra-responsive-hotel-wordpress-theme/full_screen_preview/5992155

Подскажите, пожалуйста, как это сделано. Видимо, работа какого-то скрипта.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Было бы удивительно если бы подошёл. Особенно если учесть, что вы не написали, что вам нужно. Всё что известно, это:

Имеется сайт с большой фоновой картинкой.
 

Вот я и скинул вам хороший сайт с большой фоновой картинкой. 

Link to comment
Share on other sites

  • 0

Извините, если дала мало информации. Просто сайт еще в разработке... Вот та страница, где хотелось бы сделать также, как на указанном мною примере: 

http://www.salon-kristyle.ru/contacts/

Только хочу сразу уточнить, чтобы увидеть как фоновая картинка отрабатывается http://themeforest.net/item/vierra-responsive-hotel-wordpress-theme/full_screen_preview/5992155, лучше пройти на другую страницу, например, GALLERY. Не получается дать ссылку именно на нее.

Edited by Светлана Г.
Link to comment
Share on other sites

  • 0

вы хотите сделать что бы фоновая картинка не скроллилась и была в высоту экрана?

если так то background-attachment: fixed; решит все ваши проблемы :)

Edited by Z1gnet
Link to comment
Share on other sites

  • 0

вы хотите сделать что бы фоновая картинка не скроллилась и была в высоту экрана?

если так то background-attachment: fixed; решит все ваши проблемы :)

 

Не совсем так просто. Нужно чтобы была fixed, но при этом ее размер и позиционирование высчитываются скриптом. Размер подстраивается под область просмотра.

Вот стили, которые получает картинка: 4713750.png

Edited by Светлана Г.
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy