{"id":307,"date":"2022-05-23T19:49:40","date_gmt":"2022-05-23T19:49:40","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=307"},"modified":"2023-03-27T13:08:35","modified_gmt":"2023-03-27T13:08:35","slug":"css-background-repeat","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-background-repeat\/","title":{"rendered":"CSS Background Repeat"},"content":{"rendered":"\n<p class=\"has-text-align-center\">CSS Background Repeat<\/p>\n\n\n\n<p>Well, by default, the added background image is going to be repeated both horizontally and vertically, if it does not cover the entire element. But we have control over that thing too. If you wish to change this, you can use the background-repeat property to do so.<\/p>\n\n\n\n<p>Simply speaking, you can have control over the repeating behavior of the element, like we can make the image repeat in the x-direction, or the y-direction, or not repeat at all. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS Background Repeat Property | Lecture 14 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/zbZni-QDhyY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Well, let&#8217;s have an example over here, to understand the concept in a better way.<\/p>\n\n\n\n<p>Let&#8217;s say that we are having an image in the background for the body from the above example.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"627\" height=\"333\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat.jpg\" alt=\"The background-repeat\" class=\"wp-image-308\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat.jpg 627w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-300x159.jpg 300w\" sizes=\"auto, (max-width: 627px) 100vw, 627px\" \/><\/figure>\n<\/div>\n\n\n<p>So, if we try to open the file in the browser, the output comes out to be something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"553\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-1.jpg\" alt=\"The background-repeat 1\" class=\"wp-image-309\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-1-300x162.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-1-768x415.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>Notice that the image is repeating in the above program since it is not fitting to the size of the element(body in this case), But we have control over that too. Let&#8217;s see how can we control it. <br>Now, the background image is repeated both vertically and horizontally. But how about just making it repeat either horizontally or vertically? We are going to use the background-repeat property, which has got several values like repeat-x, repeat-y, or no-repeat, repeat, etc.<\/p>\n\n\n\n<p>You can try the below code, which shows how you can repeat the image in either a vertical or horizontal direction &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"349\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-2.jpg\" alt=\"The background-repeat 2\" class=\"wp-image-310\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-2.jpg 642w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-2-300x163.jpg 300w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/figure>\n<\/div>\n\n\n<p>So, now, our background image is repeating, but this time, it is repeating horizontally. If we try to open the webpage in the browser, the output is something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"548\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-3.jpg\" alt=\"The background-repeat\" class=\"wp-image-311\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-3.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-3-300x161.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-3-768x411.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>So, as you can see that the background image is now horizontally repeating. You can also try putting on the value as repeat-y for the background-repeat property in the same above example. You can observe there, that the image will be repeating vertically now.<\/p>\n\n\n\n<p>Also, if you decide that the image should not be repeated at all, you can use the value no-repeat, for the property background-repeat. Have a look at the below program, where, the image is not at all being repeated.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"637\" height=\"363\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-4.jpg\" alt=\"The background-repeat 4\" class=\"wp-image-312\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-4.jpg 637w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-4-300x171.jpg 300w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/figure>\n<\/div>\n\n\n<p>If you write the above code and open it in the browser, you will observe that the background image is not repeated at all now.<\/p>\n\n\n\n<p>Have a look at the output &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"550\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-5.jpg\" alt=\"The background-repeat 5\" class=\"wp-image-313\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-5.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-5-300x161.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/The-background-repeat-5-768x413.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>So, you can comfortably see, that the image is not repeating at all. So, when you are adding some background image to the element, and you want to have control over its repeating behavior, you can use the background-repeat property, which has got some values, which can help us have some control over the repeating behavior of the image.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Background Repeat Well, by default, the added background image is going to be repeated both horizontally and vertically, if it does not cover the entire element. But we have control over that thing too. If you wish to change this, you can use the background-repeat property to do so. Simply speaking, you can have [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,179,13],"class_list":{"0":"post-307","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-background-repeat","9":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":7,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":5612,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/307\/revisions\/5612"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}