Какой хороший способ показать большие фоновые изображения на CSS - PullRequest
Новая
       2

Какой хороший способ показать большие фоновые изображения на CSS

7 голосов
/ 16 августа 2011

Я задал вопрос об этом, который был специфичен для моего кода, и люди были действительно полезны, поэтому я выбрал ответ, который был более удачным, хотя я и не решил свою проблему.

  • Я пытаюсь получить большой фон CSS, как у livingsocial .
  • У меня есть изображение 1400 x 1050
  • Мое текущее разрешение: 1280 X 1024
  • Мое изображение обрезается снизу

Вопрос (ы) : Каков наилучший способ отображения больших фоновых изображений с помощью css?

  • Нужно ли иметь одно и то же фоновое изображение в 4 разных разрешениях, а затем использовать изображение, которое наилучшим образом соответствует текущему разрешению пользователя (есть ли для него какой-нибудь сценарий)?
  • Нужно ли мне только одно большое изображение, которое я продолжаю масштабировать, используя css
  • Как другие решают эту проблему?

Мне интересно знать, каков наилучший способ сделать это такчто он прекрасно работает во всех разрешениях из трех вариантов выше.

Ответы [ 6 ]

4 голосов
/ 16 августа 2011

Решение CSS3 Вы можете использовать background-origin и background-size в CSS3, но оно не поддерживается IE8 и ниже.

Решение PHP Вы можете GD2чтобы масштабировать изображение, специфичное для браузера пользователя, это решение также будет включать JavaScript.

Living Social Way Они вставляют изображение с тегом <img/> и фиксируют его положение. 

<style type="text/css">
#background {
    z-index: -1; /* put it under everything*/
    position: fixed; /* make it stay in the same place, regardless of scrolling */
    top: 0;
    left: 0;
    overflow: hidden; /* clip the image */
    width: 100%; /* fill the full width of browser */
    min-height: 950px; /* show at least this much of the image */
}
#background img {
    width: 100%;
}
</style>

<body>
    <div id="background"><img /></div>
    <div id="content"><!-- Your Content Here --></div>
</body>

В Living Social к тегу <img/> применен еще некоторый код, но он выглядит своего рода избыточным, возможно, для лучшей кросс-браузерной поддержки, я здесь не показывал.

1 голос
/ 16 августа 2011

Мне не известен метод CSS, который позволит получить кроссбраузерный фон ... который на самом деле работает в более низких, то есть версиях.

Однако есть несколько плагинов jquery, например, таких:

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

0 голосов
/ 28 декабря 2011

Я просто удалил код из живого общения и подумал, что будет удобно, если я добавлю его сюда: 

<div id="landing-page-container">
  <div id="background-container">
    <div>
      <img alt="background" id="background" src="files/background.jpg">

    </div>
  </div>

</div>
<div class="container"></div>

и вот ваш css: 

html {width: 100%; height: 100%}
body {width: 100%; height: 100%}
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1}
#background-container {width: 100%; height: 100%; position: absolute}
#background {width: 100%; height: auto; z-index: -100}

и, конечно же, вам нужно предоставить свой background.jpg

0 голосов
/ 16 августа 2011

Я решил снова ответить на этот вопрос, учитывая разный набор требований, оба действительны; однако, этот адрес специально предназначен, если вы НЕ хотите, чтобы изображение было обрезано внизу.

ДЕМО: http://wecodesign.com/demos/stackoverflow-7082174.htm

<style type="text/css">
#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;    
}
#contentContainer {
    position: relative;
    width: 500px;
    height: 500px;
}
#theContent {
    /* this is all pretty much just to make it look good, nothing important in here */
    position: absolute;
    top: 200px;
    left: 200px;
    background: #FFF;
    width: 80px;
    height: 80px;
    opacity: 0.7;
    border-radius: 6px;
    padding: 10px;
}
</style>

<div id="contentContainer">
    <img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" />
    <div id="theContent">This is the content</div>
</div>
0 голосов
/ 16 августа 2011

Google: css автоматически изменяет размер фонового изображения http://css -tricks.com / 3458-совершенное полностраничное-фоновое изображение /

0 голосов
/ 16 августа 2011

Попробуйте указать ширину и высоту img, а затем, если оно будет вырезано по сторонам, центрировать изображение В противном случае ваше изображение будет обрезано в зависимости от размера экрана; Или растяните, если вы установите размер, соответствующий размеру экрана.

...