What is the best way to duplicate an image on both sides in a vertical manner?

I've successfully implemented a background image on the left side of the website, however, I'm facing difficulty in replicating the same effect on the right side of the webpage.

<style>
    body {
    background-image: url('background.png');
    background-size: 950px;
    background-repeat: repeat-y;

    }
</style>

I've attempted to duplicate the image and position it on the right side, but unfortunately, that caused the background image to shift towards the center instead. Any suggestions on how to resolve this issue would be greatly appreciated.

htmlcss

Answer №1

If you wish to have your image repeated vertically on both sides of the page, you can achieve this by using two identical backgrounds placed on different sides:

background:
  url('background.png') left / 950px repeat-y, 
  url('background.png') right / 950px repeat-y;

It is important to note that this is part of the background property and not background-image. This code is a shorthand for:

background-image: url('background.png'), url('background.png');
background-position-x: left, right;
background-size: 950px, 950px;
background-repeat: repeat-y, repeat-y;

Check out this live example:

body {
  background: 
    url('https://picsum.photos/120/120') left / 120px repeat-y, 
    url('https://picsum.photos/120/120') right / 120px repeat-y;
}

Answer №2

If you want to add multiple background images in CSS, you can specify the same image twice - once for the left side and once for the right side - and then position them accordingly.

By having one instance of the background image on the left side and another on the right side of the webpage, both repeating vertically, you have the flexibility to adjust the background-size and background-position values as needed.

body {
  background-image: url('https://example.com/image1.jpg'), url('https://example.com/image2.jpg');
  background-size: 100px auto, 100px auto;
  background-position: left top, right top;
  background-repeat: repeat-y, repeat-y;
}
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8>;
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Dual Background Images</title>      
    </head>
    <body>        
       <!-- Your content goes here -->
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a full-height page with collapsible content using Bootstrap 4 and flex

I'm attempting to create a collapsible div with a fixed height within a full-height page using flex and bootstrap 4 (also encountering the same issue with bootstrap 3). The current code snippet functions correctly on Firefox, but encounters a problem ...

csstwitter-bootstrapflexboxbootstrap-4

Encountering [Object] error in Angular's ngbTypeahead functionality

Here is the code for my input field in component.html: <input type="text" class="form-control" [(ngModel)]="searchQuery" [ngbTypeahead]="recommends" name="searchQuery" typeaheadOptionField="user ...

htmlnode.jsangulartypescriptng-bootstrap

What is the best way to change the height of cells within a grid layout?

Enhancing the buttons with a touch of depth using box-shadow resulted in an unexpected outcome - the shadows bleeding through the gaps and causing uneven spacing. https://i.sstatic.net/LYssE.png In an attempt to rectify this issue, I decided to tweak the ...

htmlcsscss-grid

Using Angular, you can incorporate a dynamic href inside interpolation by using

Looking for a way to include a redirecting link within the response of string interpolation. I am incorporating the API response value into the interpolation binding. For instance, if my response is, "This site is not working. please contact google f ...

htmlangular

Using jQuery to alter the properties of CSS classes

Is it possible to modify the properties of a CSS class, rather than the element properties, using jQuery? Here's a practical scenario: I have a div with the class red .red {background: red;} I wish to change the background property of the class re ...

jquerycssajaxclassproperties

Help needed with debugging CSS for IE6 >_<

I have been working on the following website: www.darksnippets.com While the design looks good on Firefox and Chrome, it appears terrible on IE6. For example, on the home page and other pages like , the width is too wide in IE6. I've been unable to ...

cssinternet-explorer-6

Checkbox does not appear in Internet Explorer

I'm sorry, but I have never encountered this issue before. It seems that my checkboxes are not showing up in Internet Explorer but they do in Firefox. I am unsure why this is happening as I don't know of another way to create checkboxes. &l ...

html

Selection of text within a block resembling a bar of buttons

design.css body { background-color: #666666; margin-left:500px; margin-right:500px; margin-top:10px; margin-bottom:20px; font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:12px; color:white; } div.header { bac ...

htmlcss

Breakpoint for mobile menu in FoundationCSS

When the browser is resized, the mobile menu appears at 568x320, which is the default breakpoint. https://i.sstatic.net/ZSbiq.jpg I would like to create a breakpoint around 900px to address the issue with the menu being too large as shown in the image be ...

jquerycssjquery-mobilezurb-foundation

Differences in performance between Angular and JQuery_execution times

I am facing an issue on my dynamically populated Angular page. Angular sends a request to the backend using $http.get to retrieve data which then populates attributes of a controller. For example, when I call $http.get('/_car_data'), the JSON re ...

javascriptjqueryhtmlangularjs

Exploring the process of constructing this form with the assistance of Bootstrap

Create Dropdown Form https://i.sstatic.net/rqJtS.png I am looking to create a form that allows for updating team scores based on kills. I am struggling to divide the form into 2 sections for input, as demonstrated. I am using only bootstrap for styling, ...

htmlformsbootstrap-5

What is the best way to combine this PHP, Javascript, and HTML document together?

My goal is to upload a CSV file exclusively using an HTML form and then save it in an array using PHP and Javascript. I have individual codes that work perfectly when used as separate files. However, when I attempt to combine them into one file, the Javas ...

phpjavascripthtml

Manipulate sibling elements using jQuery's addClass and remove methods

I have implemented a function that adds the class active to elements when they reach the top of the browser, ensuring that the next element will scroll in over the top. While this works smoothly in Chrome, I am encountering some jumping behavior when testi ...

javascriptjqueryhtmlcss

Retrieve information following an Ajax call inside a pre-designed template

Upon rendering a page with data put together by EJS, the goal is to refresh a section (thirdRow) of the page whenever the user submits new data. The refreshed section should display both the newly submitted data and the existing data. Although I have obtai ...

javascripthtmlajaxexpressejs

Challenge encountered in handling AJAX response data for presentation

Currently, I am immersed in a project and decided to implement AJAX for smoother form submissions. My initial attempt was trying to display text from a .txt file below the "submit" button, but unfortunately, that approach didn't yield the desired resu ...

javascriptphphtmlcssajax

Collaborate on documents with fellow users on the Django platform

Summary of the app: The main focus of this application is to enable users to create projects and share uploaded files with others, based on permission settings. Basically, after creating a project using the Project module, when a user uploads a file to the ...

pythonhtmldjangoredis

The function .classList.remove() is effective when applied to one element, but fails to work on a different element

I am facing an issue where only one element is getting affected when trying to remove classes from multiple elements if certain email input requirements are met. Can someone help me understand why this is happening? Here is the code snippet: const emailI ...

javascripthtmlcssvalidation

Is there a way to create a dropdown selection for font families with vue js?

Here is a select element with font families that I want to apply to my texts: <select v-model="focused_font"> <option value="" disabled selected>Font</option> <option v-for="font in available_fonts" ...

javascriptcssvue.jsvuejs2vue-component

When refreshed using AJAX, all dataTable pages merge into a single unified page

I followed the instructions on this page: How to update an HTML table content without refreshing the page? After implementing it, I encountered an issue where the Client-Side dataTable gets destroyed upon refreshing. When I say destroyed, all the data ...

javascriptphpjqueryhtmlajax

Angular-UI keypress event allows users to interact with components and

I am facing challenges while using the keypress feature in the following code snippet- <div ng-controller="GBNController"> ... <input id="search-field" type="text" placeholder="JSON Query" ng-model="queryText" ui-keypress="{enter: foo()}"/> .. ...

javascripthtmlangularjs