Is there a way to use the same background image for both the left and right borders?

How can I set this image as both the left and right background image on my webpage? I want it to be displayed on both sides. Any suggestions on how to achieve this? Here is the code snippet I have implemented so far:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WIMF.Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <link rel="stylesheet" type="txt/css" href="Content/css/bootstrap.css" />
</head>
<body style="background: url(Content/images/vertical.jpg); background-repeat: repeat-y; background-position: left">
    <form id="form_id" runat="server">
           <div class="container">
            <h1>Where Is My Food</h1>
        </div>
        <div class="col-md-9 col-md-offset-2">
            <div class="input-group" style="float: left">
                <button type="button" class="btn btn-primary">WIMF</button>
            </div>
[...]
    </form>
</body>
</html>

Answer №1

To achieve a multi-background effect, you can specify different backgrounds for the left and right sides. For the left side, use background-position:left top, and for the right side, use background-position:right top. Here's an example of the code:

body {
  background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-outline-128.png) left top,
            url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-outline-128.png) right top;
  background-repeat:repeat-y;
}

The demo showcases the use of this image:

Check out the Demo here.

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

Ensure that the <aside> elements span the entire width of their containing parent element

I am currently designing a website and I am aiming for a specific layout. Any advice on how to achieve this would be greatly appreciated. The header of the page consists of: a logo aligned to the left within an <a> tag 2 widgets placed in <asid ...

Non-admin users may experience repeated prompting for user credentials when using Asp.net on IIS7

My ASP.net website is using Windows Authentication on IIS7. Users who are not part of the administrator group are experiencing constant prompts for user credentials in Internet Explorer. However, if they click cancel, the website runs fine as long as they ...

Creating a moving background for a loading bar with HTML5 and Shadow DOM is currently underway

Can anyone help with animating the progress bar using the HTML5 <progess> tag? I've been able to customize the Shadow DOM elements successfully, but I'm having trouble animating the background (repeating linear gradient). It seems to work i ...

ORA-01460: Unsupported file conversion requested during upload operation

In the snippet below, you will find the code used to upload a file into the party_images table. protected void upload_Click(object sender, EventArgs e) { try { using (OracleConnection connection = new OracleConnection(conString)) { ...

Server blocking access to Javascript files

Having some trouble with my code, it works fine on Localhost but not on Fasthosts server. Seems to be an access issue to a folder on the server, here are the debug messages: GET (http://reggarockaboogie.co.uk/images/gallery/fld01/) 403 (Forbidden) k.cors ...

CSS Problem: The first-child, last-child, and only-child pseudo-classes are not functioning as expected when applied to lists

I am facing an issue with the following pseudo classes: first-child: The first a element within each div should have a red background. last-child: The last a element within each div should have a blue background. only-child: Only the a element of the last ...

Using the jQuery POST method to execute a redirect upon successful completion

I am attempting to utilize jQuery to create a post method. I have implemented it within a form and used bootstravalidator for validation. Once the form is successfully validated, it is posted and the PHP code comes into action. Now, my goal is to redirect ...

What could be causing my second ajax call to render the page unresponsive?

I am encountering an issue with my AJAX call. It works fine on the first attempt, but when I try to call it a second time, the page becomes unresponsive. I am not sure what is causing this issue. The code is located within the document ready function. The ...

Creating a tooltip for new list items: A step-by-step guide

I'm currently working on creating a tooltip using JQuery for incoming list items. Users will input text in a textfield, press enter, and those values will be displayed in a visible list on the website. I intend to have a tooltip associated with each i ...

A Guide to Quickly Registering Multiple Sidebars in functions.php

I'm looking to efficiently register multiple sidebars at once and differentiate them by unique IDs, similar to how we can easily register multiple menus simultaneously such as Main-Menu and Footer-menu. <?php register_nav_menus(array('primary ...

notification that appears when checkbox is ticked

If a certain delivery option is selected during the checkout process on our website, we would like to trigger a popup box displaying a custom message. Here is the specific checkbox for that delivery option: <input id="delivery_option_22_6" class="deliv ...

Utilize visuals to select premade designs

I am looking to enhance the user experience in selecting templates on Wordpress by integrating images for a visual preview. Instead of a traditional text-based dropdown menu, users would be able to see what the template looks like before choosing it. EDIT ...

Troubleshooting Cross-Origin Resource Sharing (CORS) problem in Jquery

When using AJAX post from jQuery to call two REST services on different domains for business logic, a CORS issue arises. By setting crossDomain: true in my AJAX call following Google references, it works fine without specifying headers. However, if I inc ...

Checking if a div element contains a child with a specific class name using JavaScript

Okay, so here's the dilemma: Is there a way to use JavaScript to determine if a DIV has a specific classname? For instance, consider this sample HTML <div class="cart"></div>. This DIV would act as the parent, and JavaScript would dynamic ...

Scrolling a table to the current ng-init date in AngularJs: What’s the best approach?

I found a code snippet in my DOM that sets the current date on a table. <table id="daysTableLeft" class="table table-hover" ng-init="getHorraire(pickDateRow,$index,0)"> <tr ng-repeat="fd in getFullDayDate track by $index ...

Code written in JavaScript inside an iframe

Is it possible to run JavaScript code inside an iframe even if the script with id "us" is loaded after creating the iframe? If so, how can this be accomplished? <iframe id="preview"> #document <html> < ...

Ways to display a series of images side by side to fill the entire width consistently

I need a solution to display multiple images in a box, all set to the same height and width of 154px x 125px. While this can be achieved, the issue arises when there isn't enough space for the final image, leaving blank areas. Is there a way to make t ...

How can I alter the display of table rows and columns using responsive design techniques?

Currently utilizing bootstrap, I have a drinks menu displayed in the following layout when viewed in Firefox. The mobile view of this menu is functioning properly. However, I am encountering issues with the desktop view as the columns are not aligning cor ...

Transforming JQuery code into pure Javascript: Attaching an event listener to dynamically generated elements

After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...

Utilizing CSS property { white-space: nowrap } in Outlook for better formatting

Currently I am facing an issue with column widths in a report that I am generating dynamically and emailing directly out of SQL. The HTML for the report is being generated dynamically but there seems to be a problem with the column widths. I have added th ...