Positioning multiple images in CSS

I am facing an issue with my background images where one of them is invisible and cannot be displayed. Additionally, the padding-top for the li a element seems to not be working properly.

HTML:

<ul class="menu">
    <li class="item-101 current active"><a href="/">Home</a></li>
    <li class="item-102"><a href="/index.php/merchants-shops">Merchants / Shops</a></li>      
    <li class="item-103"><a href="/index.php/contact-us">Contact us</a></li>
</ul>

CSS:

* {
    margin: 0;
}

#left #menu ul.menu {
    list-style: none;
    padding: 0;
}

#left #menu ul.menu li {
   background: url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat, url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat;
    background-position: left 0px, 200px 0px;
   width: 294px;
   height: 44px;
   padding: 0 0 5px 0;
}

#left #menu ul.menu li a {
    text-transform: uppercase;
    text-decoration: none;   
    font-style: italic;
    padding: 15px 0 0 17px;
    color: #336699;    
}

See full example here: http://jsfiddle.net/BWagZ/

The issues I need help with are: 1) How can I display two background images on a button? The first image acts as the main background while the second image is a small arrow that should appear on the right side of the button. 2) Why is the padding-top for li elements not functioning as expected? I want to add top padding to the text within the li element in the button.

css

Answer №1

To achieve a double background and cover the full button area, make sure to add a div inside the anchor tag. Take a look at the demo on fiddle

HTML

<div id="left">

<div id="menu">    
    <ul class="menu">
        <li class="item-101 current active"><a href="/"><div>Home</div></a></li><li class="item-102"><a href="/index.php/merchants-shops"><div>Merchants / Shops</div></a></li><li class="item-103"><a href="/index.php/contact-us"><div>Contact us</div></a></li></ul>
    </div>
</div>

CSS

* {
margin: 0;
}

#left #menu ul.menu {
list-style: none;
padding: 0;
}

#left #menu ul.menu li {
background: url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat;
background-position: left 0px, 200px 0px;
width: 294px;
height: 30px;
padding: 14px 0 5px 0;
}

#left #menu ul.menu li a {
    text-transform: uppercase;
    text-decoration: none;   
    font-style: italic;
    color: #336699;
}
#left #menu ul.menu li a div {
    color: #336699;
    background:url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat center right;
    width: 235px;
}

Check out the live example

Answer №2

It seems like you're aiming for the links to be vertically aligned towards the top within the li element. In this case, adjusting the padding-top in the li element rather than the a element might solve your issue (tested on Chromium). Your image difficulty remains unclear to me.

Answer №3

To enhance the appearance, consider assigning a z-index to each background. Placing the arrow image first will allow both elements to be visible, just ensure they are properly adjusted.

Interested in seeing an example? Check out this link: http://jsfiddle.net/goodfriend/BWagZ/10/

Answer №4

You might want to consider rearranging the sequence of your background elements.

background: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat 200px 0px,
   url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat left 0px;

Additionally, you can modify the a elements by adjusting their line-height property.

Check out this link for a live example: http://jsfiddle.net/MrLister/yFMZf/1

Answer №5

Your approach is effective. Simply switch the images between them to achieve the desired effect. Here is how it should be done:

background: url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat,  url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat;

background-position: left 0px, 200px 0px;

Answer №6

Looking to achieve a similar effect?

Check out the Demo here

Solution 1:

Adjust the image orders and positioning as needed.

Update your CSS with the code below:

#left #menu ul.menu li {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png),    url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png); 
    background-position: 200px 7px, left 0px;
    background-repeat: no-repeat;
    width: 294px;
    height: 44px;
    padding: 0 0 5px 0;
}

Solution 2:

Add display: block; in the following line of your CSS:

 #left #menu ul.menu li a

This will make the entire list item clickable and ensure that the padding behaves correctly.

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

Tips on adjusting the default width of the React player interface

I'm currently utilizing react-player to display a video in my app. The default width it comes with is not responsive, and applying CSS didn't prove to be effective. import ReactPlayer from 'react-player'; <ReactPlayer url="https:// ...

cssreactjsresponsivereact-player

Angular text input with customizable placeholder text and embedded icon

Hey there, I'm looking to create a unique custom textbox that includes a text placeholder and a help icon that will display useful information in a popover. https://i.sstatic.net/Zh0IK.png When typing into the input, the textbox should have a specif ...

htmlcssangularbootstrap-4

Guide to setting a background image on a div when hovering using jQuery

I'm having trouble adding a background image to this specific div element: <div class="logo-main"></div> Here is the script I've been using, but it doesn't seem to be working as expected: <script type='text/javascript& ...

jquerycssbackgroundhover

`In Firefox, the footer refuses to remain anchored at the bottom of the page`

After using the following code, my footer stays at the bottom of my page: In my vue project, #app serves as the container for my content and footer. #app { min-height: 100%; position: relative; } .footer { position: absolute; bottom: 0; width: ...

cssvue.jsfirefoxposition

Can CSS be used to create drop down menus?

Is it possible to create a dropdown menu using only CSS, similar to what you would find in most applications? I have a simple menu bar at the top of my screen and I want to be able to hover over an item like "Item1" and see sub-items appear below it. I en ...

javascripthtmlcss

Modify the background color of <td> elements depending on the specific value

I attempted to implement this approach, but unfortunately it is not working as expected. I found guidance from this source. Below is the code I am using: $today = date('Y-m-d'); $date = new DateTime(); $R1D2 = $date->setISODate($year,$week,1 ...

phphtmlcss

The color of the text on the Homepage appears differently on iOS Safari

At the top of my homepage, I have displayed the company phone number with white text color. It appears correctly as white on my desktop browsers (Firefox and Chrome), also on my Droid phone, but shows up as dark gray on my iOS phone using Safari. Why is th ...

htmlioscsscolorssafari

Questions about syntax: What is the correct course of action?

If there is a child inside a div with an id, such as id="mother", how should the css be written correctly? Example: 1) #mother ul li {...} or 2) .mother ul li {...} Is there a difference? The second example I came across when MOTHER had a class name, ...

htmlcsssyntax

Ways to expand the border horizontally using CSS animation from the middle

Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...

javascriptjqueryhtmlcsscss-animations

How to Overlay a Semi-Transparent Object on a Background Video using CSS and HTML

Hey there, I'm encountering a puzzling issue with my website. I have a background video set up, and I wanted to overlay a floating textbox on top of it. However, no matter what I do, the background color and borders of the textbox seem to be hiding be ...

htmlcss

The spacing between elements in Flexbox is too excessive, creating an overly wide gap

How can I maintain a fixed 40 pixel gap between columns in flexbox without it increasing as the screen width widens? (I apologize for the brevity of this description, but there are no additional details to provide at this time) .browser-box { max-wid ...

htmlcssflexbox

Shorten Text - React Native

I currently have a React Native application with a FlatList component. The logic I initially implemented was to display an Expand/Collapse arrow whenever the content at the 100th position in the list is not empty. However, I now realize that this approach ...

javascriptcssreactjsreact-nativetruncate

Bring the element to the top of the page by clicking on the anchor within the element or anywhere within the specified div ID

I am looking to implement a functionality where the page scrolls to the top of the navigation div ID when a link inside the navigation div is clicked, or ideally even when clicking anywhere within the div itself that contains the navigation links. After r ...

javascriptjquerycsshtml

An inclusive CSS-compatible calendar control for ASP.NET

I am currently using the Calendar control provided by .NET but I have encountered issues with how it renders HTML in certain situations. Unfortunately, this is hard-coded and cannot be changed. It seems that the Calendar control has not been updated in .NE ...

asp.netcsscalendar

What could be causing the image URL to not function properly in the CSS file?

I have been struggling with this issue all day and have searched numerous sources for answers. The login.css file can be found at: WebContent/resources/css/login.css The image file is located here: WebContent/resources/img/pencil.jpg Despite my attem ...

htmlcssimagejspurl

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself. Any assistance would be highly a ...

javascriptjquerycss

Ensure that the content fills the entire height of the container and include a scrollbar

I'm currently utilizing CKEditor () and have developed my own customized file browser. The issue I'm encountering is that when the filebrowser is opened, it appears in a new popup window without scrollbars. I reached out for support through a ti ...

cssheightckeditor

Centering an icon in tandem with Typography text using Material UI

Is there a way to align an icon with the text so that they are on the same level? Currently, it seems like the icon is slightly above the text. I've tried using padding-top: 5px and margin-top: 5px, but those solutions didn't work as expected. ...

cssreactjsmaterial-uireact-icons

Is there a way to adjust the positioning of the center item in owl carousel 2 after applying a scale transformation of 2.0, without it getting cropped vertically?

I am having an issue with using Bootstrap card and owl carousel 2. When I apply transform: scale(2.0) to the center item, it becomes vertically cropped instead of staying centered. It overflows in the owl-stage section. Is there a way to fix this problem? ...

htmljquerycssowl-carouselbootstrap-5

Making sure all items in the top row of Flexbox columns have the same height

Within my flex wrapper, I have multiple column components with various flex items inside. Each column displays content adjacent to each other. The challenge is to ensure that the top item in each column has an equal height, creating a row-like effect. I&a ...

htmlcssflexboxcss-grid