Фон повторяется, и я не уверен, почему - PullRequest
Новая
       3

Фон повторяется, и я не уверен, почему

0 голосов
/ 10 марта 2011

У меня есть большое изображение, которое я хотел бы использовать в качестве фона, но по какой-то причине оно немного повторяется на моем большом экране.Есть ли способ, которым я могу просто увеличить или уменьшить размер изображения в соответствии с размером экрана?

РЕДАКТИРОВАТЬ: Итак, я изменил свой HTML, чтобы выглядеть так: 

<body id="wrapper">
   <div id="body">
       <img src="/images/sky2.jpg" class="stretch" alt="" />
  </div>

и мой CSSна это: 

#body {
   width: 100%; 
   height: 100%; 
   position: absolute; 
   left: 0px; 
   top: 0px; 
   z-index: 0;
  }

.stretch {
width:100%;
 height:100%;
}

И фон не будет отображаться при предварительном просмотре.У меня есть 3 других элемента div, которые показывают, но только на белом фоне = /.

Ответы [ 5 ]

2 голосов
/ 10 марта 2011

Вы фактически не показываете здесь свой html, просто какой-то встроенный CSS и немного (я полагаю, связанный?) CSS.Вы загружаете изображение как background-image в элемент body в этом первом бите css, и это здорово.Поскольку он загружается как фоновое изображение в CSS, а не как тег в HTML, ваш второй бит CSS (с селектором #body img) никак не влияет на него.

То, что у вас есть на самом деле,в действительности это так: 

#body {
   position:fixed; 
   top:-50%; 
   left:-50%; 
   width:200%; 
   height:200%;
   position:relative;
   background-image: url(images/sky2.JPG);
}

Это очень странный фрагмент кода.Но единственная релевантная часть вашего вопроса - это часть background-image.Ответ состоит из нескольких частей.В CSS2: нет, вы не можете настроить размер фонового изображения.Вы можете установить, чтобы он не повторялся (как показали другие), и вы можете установить его положение: 

body {
  background-position: center left;
}

В CSS3 вы можете изменить размер, и у вас есть несколько вариантов (вы ищете cover), Думаю) но работает только для последних браузеров.Свойство называется background-size, но поскольку оно все еще является экспериментальным, его необходимо объявить индивидуально для каждого браузера: 

/* this is the default */
body {
  -moz-background-size: auto;
  -webkit-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
}

/* this will size the image proportionally so that it is contained, but not cropped */
body {
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

/* this will size the image proportionally so that it fills all the area */
body {
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* this will size the image as a percentage of the area */
.example #percent {
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  -o-background-size: 50% 50%;
  background-size: 50% 50%;
}

/* this will size the image to exact specifications */
.example #absolute {
  -moz-background-size: 100px 25px;
  -webkit-background-size: 100px 25px;
  -o-background-size: 100px 25px;
  background-size: 100px 25px;
}
2 голосов
/ 10 марта 2011

переместить background-repeat: no-repeat; в #body вместо #body img

1 голос
/ 10 марта 2011

1) Свойство CSS background-repeat: no-repeat; должно быть в самом элементе body, то есть в элементе, для которого вы задаете фон.

2) В CSS вы пишете #body ... Полагаю, вы хотите поговорить об элементе body? Тогда вам нужно просто написать body в CSS. #body будет для элемента, объявленного, скажем, <div id="body">.

3) Кроме того, я не уверен насчет #body img. #body img означает «элемент img внутри тела». У вас действительно есть элемент img внутри тела? Я имею в виду, ваша разметка такая? 

<body>
   ...
   <img ... >
   ...
</body>

И вы действительно хотите придать стиль этому элементу img?

В любом случае, стиль, который применяется к элементу img, не имеет ничего общего с фоном тела.

1 голос
/ 10 марта 2011 
#img.source-image {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
}

Демонстрационная страница: http://css -tricks.com / examples / ImageToBackgroundImage /

Источник: http://css -tricks.com / how-to-resizeable-background-image /

Я думаю, что стоит прочитать эту страницу:)

1 голос
/ 10 марта 2011 
<style type="text/css">
body {
background-image: url(images/sky2.JPG);
background-repeat: no-repeat;
}   
</style>

Вам необходимо установить его для того же элемента или класса или чего-либо еще.Также вы можете поместить тело css в ваше css.

Хорошо, извините, есть и другие неправильные вещи, такие как #body {.Я не думаю, что у вас есть элемент с идентификатором "тело".Не пытаетесь RTFM, но, возможно, читаете некоторые учебники по CSS?

Чтобы масштабировать изображение, возможно, взгляните на: Растянуть и масштабировать изображение CSS в фоновом режиме - только с CSS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...