Repeating image html code

background-repeat

Свойство background-repeat устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.

Интерактивный пример

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round ) или равномерно растянуть от конца к концу (используя space ).

Синтаксис

/*Ключевые значения*/ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /*Два значения: горизонтальное | вертикальное*/ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; /* Глобальные значения */ background-repeat: inherit; background-repeat: initial; background-repeat: unset; 

Значения

• • : Следующие однозначные имеют двухзначные эквиваленты:	repeat-x	тоже самое, что и repeat no-repeat
    repeat-y	тоже самое, что и no-repeat repeat
    repeat	тоже самое, что и repeat repeat
    space	тоже самое, что и space space
    round	тоже самое, что и round round
    no-repeat	тоже самое, что и no-repeat no-repeat	В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.

    repeat	Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
    space	Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства background-position игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space .
    round	Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
    no-repeat	Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством background-position .

  Примеры

  HTML

  ol> li>no-repeat div class="one"> div> li> li>repeat div class="two"> div> li> li>repeat-x div class="three"> div> li> li>repeat-y div class="four"> div> li> li>repeat-x, repeat-y (multiple images) div class="five"> div> li> ol> 

  CSS

  /* Совместно для всех DIVS в примере */ li margin-bottom: 12px;> div  background-image: url(starsolid.gif); width: 144px; height: 84px; > /* повторение фона CSS */ .one  background-repeat: no-repeat; > .two  background-repeat: repeat; > .three  background-repeat: repeat-x; > .four  background-repeat: repeat-y; > /* Несколько изображений */ .five  background-image: url(starsolid.gif), url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; > 

  Результат

  В этом примере каждому элементу списка соответствует другое значение background-repeat .

  Спецификация

  Начальное значение	repeat
  Применяется к	все элементы. Это также применяется к ::first-letter и ::first-line .
  Наследуется	нет
  Обработка значения	список, каждый элемент которого содержит 2 ключевых слова, по одному на размер
  Animation type	discrete

  Поддержка браузеров

  BCD tables only load in the browser

  Смотрите также

  Found a content problem with this page?

  This page was last modified on 22 февр. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  Repeat Image

  This page provides «repeat image» codes — HTML code for making your background image repeat (or «tile»).

  You can make your background image repeat across the page (or any other HTML element) by using the CSS background-repeat property. You can also use the background property to set all your background related properties at once.

  You can make your background image repeat horizontally, vertically, or both. Below are some examples (and code) of repeating background images.

  Default Repeat

  When you add a background image, the image repeats by default. In other words, you don’t need to add any «repeat image» code to make your background tile across the element. It automatically does it.

  This text is displayed in front of the repeating image. That’s because it’s a background image, as opposed to a normal image that has been defined using normal image code.

  Repeat Horizontally

  You can repeat your image horizontally by using background-repeat:repeat-x .

  This text is displayed in front of the repeating image. That’s because it’s a background image, as opposed to a normal image that has been defined using normal image code.

  Repeat Vertically

  You can tile your image vertically by using background-repeat:repeat-y .

  This text is displayed in front of the repeating image. That’s because it’s a background image, as opposed to a normal image that has been defined using normal image code.

  No Repeat

  You can prevent your background image from repeating by using background-repeat:no-repeat .

  This text is displayed in front of the repeating image. That’s because it’s a background image, as opposed to a normal image that has been defined using normal image code.

  Using the background Property

  It’s usually more efficient to use the background property to define your background images. This property is shorthand for writing all your background related properties. In this example, we acheive the same effect as the above example, but with less code.

  This text is displayed in front of the repeating image. That’s because it’s a background image, as opposed to a normal image that has been defined using normal image code.

  Positioning your Repeating Background Image

  You can define where your repeating background image is positioned.

  This text is displayed in front of the repeating image. That’s because it’s a background image, as opposed to a normal image that has been defined using normal image code.

  Repeating Embedded Images

  This is not a common thing but just in case you want to do it, I’ve added an example below.

  Technically, you can tile/repeat embedded images. Embedded images are the ones that are defined using the HTML img tag (as opposed to the CSS background-image or background properties). In other words, these are not background images — they’re foreground images.

  Anyway, you could tile your embedded images simply by placing them next to each other — or underneath each other.

  I wouldn’t normally recommend this technique but it’s here in case you want it. The main problem with doing this is that you can’t place text in front of your image (well, technically you can but it becomes a whole lot harder).

  This text is displayed in front of the repeating image. That’s because it’s a background image, as opposed to a normal image that has been defined using normal image code.

  Источник

  Repeating css image as content

  Most browsers ignore the background when printing, so in this case only the content from the body::before is used. This is a browser setting, not a problem with your css.

  2 Answers 2

  Most browsers’ default behavior is not printing the background colors. But image , SVG and property content does it well.

  Use SVG solution(fill pattern) to achieve like the repeating image background:

  @Shawn svg element can use z-axis, but inside it can’t. It’s 2d canvas don’t have z-axis. sample: jsfiddle.net/k459wv6w/3

  It’d be perfect if it only filled the table, but I can live with this. Thanks for your help fixing this browser problem.

  @Shawn sorry really don’t know what you mean at first. you can use position: absolute to achieve your goal. Glad to help you 😀

  I am not so sure if this could be an option to you. But even if you try to force the printing settings via CSS, different browsers can have different setting being switched on and off, Check link for more info, therefore you have an option to explicitly put the background image in tag and style it as following:

  I have created JsFiddle to demo this

  Linked

  Related

  Hot Network Questions

  Subscribe to RSS

  To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

  Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

  By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

  Источник

  How do I make an image repeat by modifying the css and html

  I am trying to repeat an image .middle-container-line in relation to the left and right container. Basically as more images are inserted, I want the .middle-container-line image to repeat y axis (down) and follow the images that are inserted. So i dont want to specify a height using pixals as I want the upload of images to determine how long down the line repeats. Is this possible? Here is my code: http://jsfiddle.net/F9R4P/ CSS:

  .main-container < width:600px; >.image < height:100px; width:100px; background:black; color:white; margin:20px 0 0 20px; >.left-container < height:1000px; border:1px solid red; float:left; width:39%; >.middle-container-line < float:left; width:20%; height:100%; border:1px solid green; height:100%; min-height:200px; background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y; >.right-container

  your fiddle seems to show what you are after or is the question about how to make all the columns the same height?

  Yes sorry, im trying to make the columns same height without using a specified height. i want the upload of images to determine how long the line is. does that make sense?

  so the image of class .middle-container-line should be repeated based on either of the classes on left and right?

  5 Answers 5

  You can actually combine the whole code together like this:

  For css reference background you can have a quick look in here: http://www.overpie.com/css/tutorials/css-background

  You need to add Jquery Library to find out max height. Either left or right div will have max height.

  Add jQuery library in your page, if not added. http://code.jquery.com/jquery-1.8.3.min.js

   
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
   

   jQuery(document).ready(function()< var leftHeight = $( ".left-container" ).height(); var rightHeight = $( ".right-container" ).height(); if(leftHeight>rightHeight) $(".middle-container-line").css('height',leftHeight); else $(".middle-container-line").css('height',rightHeight); 

  .main-container < width:600px; >.image < height:100px; width:100px; background:black; color:white; margin:20px 0 0 20px; >.left-container < height:1000px; border:1px solid red; float:left; width:39%; >.middle-container-line < float:left; width:20%; border:1px solid green; min-height:200px; background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y; display:table-cell; >.right-container

  jQuery is a bit overkill for this layout, CSS alone will do it. However, it does illustrate an alternative approach.

  Simply remove the middle div from the HTML completely, float the right side div to the right and put the bg image on the container.

   
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
   
  this is image
   
  this is image
   
  this is image
   
  this is image
   
   
   

  .main-container < width:600px; overflow:hidden; background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y; >.image < height:100px; width:100px; background:black; color:white; margin:20px 0 0 20px; >.left-container < height:1000px; border:1px solid red; float:left; width:39%; >.right-container

  In the floated child containers, height: 100% will have no effect and height: 1000px is not really needed. Your containers will adjust their heights according to the number of images added to the left/right child containers.

  Yeah. I knew that but I didn’t want to mess with the existing CSS other than to show the basic resolution to the issue.

  Here is one way of doing it using table-cells:

  .main-container < width:600px; display: table; >.image < height:100px; width:100px; background:black; color:white; margin:20px 0 0 20px; >.left-container < display: table-cell; width:39%; border:1px solid red; >.middle-container-line < display: table-cell; width:20%; border:1px solid green; background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y; >.right-container

  Instead of using floats, apply display: table to your parent container ( .main-container ), and then display: table-cell to .left-container , .middle-container-line , and .right-container .

  The resulting layout will have 3 columns that are all the same height, and the overall height will be determined by either the left or the right container depending on how many images are in each.

  By using CSS tables, the three columns will always stay on a single line, depending on whether or not you need a responsive design instead of fixing the width of the parent container.

  Note: Apply text-align: center to .left-container and .right-container is you want the images centered horizontally within each column.

  Источник

  Читайте также:  Html color dark gray