Mirror image navigation bar on both sides

Currently, I am attempting to create a navbar with images. The goal is to have the navbar centered in the middle with the image repeated on both sides. However, I am running into an issue where the picture is only repeating on the right side. Does anyone have a solution for this?

#leftHalf {
   background: url(images/bg-1.jpg);
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}
#rightHalf {
   background: url(images/bg-2.jpg);
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

I also came across this code snippet, but it seems to only address the background. Do I need to separate the navbar into two containers?

JSFIDDLE

This is what I have managed to achieve so far. Any help or guidance would be greatly appreciated.

htmlcss

Answer №2

Appreciate the assistance, locateganesh! The solution worked perfectly for me. However, I encountered some unexpected placeholders between the buttons in your updated jsfiddle. I'm not sure how this occurred since I only adjusted the text alignment to center.

Update: I managed to remove the spaces between the images.

.yourclass {
    font-size: 0;
}

Answer №3

In the realm of css3, there exists the ability to incorporate multiple images as background-images. Utilize the same set of background-? rules with this innovative feature.

<html>
<head>
<title>Image Demo</title>
<style>
body{
    text-align: center;
}
#nav{
    background-image: url("images/battery1.jpg"), url("images/battery2.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    width: 100%;
    height: 200px;
}
</style>
</head>

<body>
<div id="nav">some text</div>
</body>
</html>

Give it a try, though you'll need to supply your own battery images.

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

When the user clicks, position a div directly below another div

Can anyone help me figure out how to center a div underneath another one when a specific div is clicked using programming? I've tried multiple solutions but nothing seems to work. Below is the code snippet that I have written. You can also check out t ...

javascriptjquerycssangularjs

Challenges arise when transferring data retrieved from a table into a bootstrap modal window

I have been attempting to transfer values from a table into a modal. Initially, I successfully displayed the <td> values in an alert when a button was clicked on a specific row. Now, I am aiming to take it a step further by having these <td> va ...

javascriptjqueryhtmlbootstrap-4

What is the proper way to incorporate quotation marks within other quotation marks?

Is there a way to generate an ID within the myFunction() function in JavaScript? I need a single string to call an HTML script as a variable. Any corrections or suggestions are welcome. Here is a sample code snippet: <button class="tablinks" onclick=" ...

javascripthtml

Managing various choices in a Select menu using a single submit button

My method of using mysql to insert data into dropdown menus is not working as expected. Each dropdown menu has a unique name assigned from the database query $stmt. The content for each dropdown menu is retrieved through another query, $stmt2. My goal i ...

phphtmlmysql

Attempting to shift an element without relying on the use of position:relative

I'm trying to figure out if I can relocate this (image1) to (image2). I prefer not to utilize position:relative as it may disrupt my design in bootstrap. Image 1 (I don't want it here) Image 2 ( I want it here) Here is the relevant CSS code: ...

htmlcss

Looking for assistance in streamlining my jQuery code for bootstrap tab pane. Any takers?

Having trouble setting a specific tab as active when navigating from different links. I have found a solution, but it involves writing code for each individual tab. Can someone offer assistance in simplifying the code? <table class="nav nav-tabs"> ...

jqueryhtmlcsstwitter-bootstrap

choose particular column in every row from the table's header class name

Every <th> in a table has a class, while the <td> elements do not. Is there a way to style all corresponding <td> elements with the same styles as their <th> counterparts using only plain css without any script? Furthermore, since ...

css

What is the most effective method for displaying two external web pages next to each other?

Looking for a solution to display an English Wikipedia article on the left side of the page alongside its Spanish version on the right side. Wondering if it's possible using HTML, JavaScript, AJAX, etc. I am aware that I could use iframes, but I woul ...

javascripthtmlajaxiframe

The align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (<span class="align-middle">middle</span>) in the center of a div. Here is the code snippet: <div class="col-4 shadow product-added"> <div class="row"> <div cla ...

htmlcsstwitter-bootstrap

Is there a way to adjust the dimensions of the <audio> tag using CSS?

//I am trying to adjust the size of the audio player based on the 'height' and 'width' properties, but it doesn't seem to be working as expected. <audio autoplay controls height="100px" width="100px"> ...

html

Organize JSON information in a tabular layout

After resolving my previous issue, I am now attempting to store JSON data in cookies and then retrieve it to organize the variables in tabular form. However, I am uncertain about how to go about arranging it. View the demonstration here ...

javascriptjqueryhtmljson

Modifying table design for mobile devices using Bootstrap

For desktop view, I'm aiming to have 4 columns with images positioned above the text in a similar layout to the first image (using col-3), which is quite straightforward. I currently have the image and text within the same column. https://i.sstatic.n ...

cssbootstrap-5

Is there a way to choose an option from a select form using a button?

Currently, I have a fully functional form set up like this: <form name="form1" method="post" action="process.php"> <p> <label for="numbers"></label> <select name="select"> <option selected disable ...

phphtmlforms

Nested data selection in React

I have been experimenting with creating a nested select optgroup and attempted the following: const data = [ { sectorId: 5, sectorName: "Sector One", departments: [ { deptName: "Production", jobtitles: [ { ...

javascripthtmlreactjsselectoptgroup

Using PHP to fill input field with text output

I've been searching for an answer to this question, but so far I haven't found one. In my database, I input two pieces of data and receive a success or failure outcome. What I want is to have a "Submit" button that triggers my PHP query (which ...

phpjavascripthtmlajaxdom

Encountered an error when attempting to use 'appendChild' on 'Node': the first parameter is not the correct type. It was able to work with some elements, but not with others

I'm currently working on a script that utilizes fetch to retrieve an external HTML file. The goal is to perform some operations to create two HTMLCollections and then iterate over them to display a div containing one element from each collection. Here ...

javascripthtmldomchild-nodes

Is it possible for URLs in CSS Custom Properties to be relative to the CSS file where they are defined?

I have a CSS library with resources like images and fonts that can be accessed from anywhere via CDN. I am trying to create URLs for these resources as Custom CSS Properties, relative to the library. <!-- https://my.server/index.html --> <link rel ...

htmlcss

Issue with CSS in Internet Explorer 7

CSS CODE: .search { float: left; width: 100%; display: block; } .search ul.tabs { height: 23px; margin-top: 50px; padding: 0px; } /* FF ONLY */ .search ul.tabs, x:-moz-any-link { height: 26px; margin-top: 50px; padding: 0px; } .search ul.tabs ...

htmlcss

Updating CSS for dropdown menu in Fluent/Fabric design

I am working with a dropdown component from Fluent UI and I am trying to customize the CSS of the dropdown options. Although I can add classes using className to the dropdown itself, I am facing difficulty in styling the dropdown options directly due to th ...

cssreactjsfluent-ui

Having trouble retrieving the text of an element using Selenium

Looking at the DOM element provided: <span class="styles__Content-rlm06o-1 ixoRjG">20.00000000</span> I am attempting to extract the value 20.00000000 using the following Python code: text = driver.find_elements_by_xpath("//*[@c ...

pythoncssseleniumselenium-webdriverxpath