Choose an image to set as the background for your list

I am satisfied with my current lists, but I'm looking to take things to the next level. My idea is to use a background image (at least that's all I've come up with so far) to display each li item on the corresponding line of the image. You can check out my jsFiddle, although it's not quite working as expected.

Here is the CSS:

ol {
    display: inline-block;
    background-image: url("http://pixelbrush.ru/uploads/posts/2013-01/1359314378_0001-2.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

Do you think this is possible? If so, how would I go about implementing it?

Please note that I am open to changing the image if it will make this concept work better.

jquerycsslistviewjquery-mobile

Answer №1

Recommendation: Consider transitioning away from jQuery-UI. While the library is not inherently bad, it may have built-in behaviors that conflict with your customization needs. Creating custom styles from scratch could be a simpler solution compared to overriding numerous jQuery UI styles.

The method you used for adding the background-image was correct, but more specific selectors within the library were applying background and border colors to the li elements above the ol, causing your added image to be hidden. To address this issue, implement the following settings:

  • Adjust the background of the li and a elements inside the ol by using a more specific selector than what the library utilizes. Additionally, given the non-straight nature of your background image, consider nullifying any borders as they might appear to extend beyond the padding.

    .ui-page-theme-a .ui-block-a ol li.ui-bar-inherit, .ui-page-theme-a .ui-block-a ol li a.ui-btn{
  background: transparent; /* set background of the lis to transparent */
  border-color: transparent; /* set border color to transparent */
}

  • Set the padding-top of the ol element to create space before the content begins, preventing the header (Europe) from overlapping with the clip.

    .ui-page-theme-a .ui-block-a ol.ui-listview-inset{
  padding-top: 3em; /* adding some padding-top to ol to make header come where we want it to */
}

  • Lastly, change the background-size of the parent ol to cover instead of contain to fill the entire width and height of the container.

    ol {
  display: inline-block;
  background-image: url("http://pixelbrush.ru/uploads/posts/2013-01/1359314378_0001-2.jpg");
  background-size: cover ;
  background-repeat: no-repeat;
}

View Demo on Fiddle

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

Calculate the number of characters in one line inside a contentEditable DIV using Jquery

Can you accurately count the number of characters in a single line? For example, if we have a paragraph with 5 lines, is there a way to count the characters in each individual line? All the information I've come across only seems to tally the total ch ...

jquerycharactercount

Implementing fullCalendar's addEventSource function with the color customization feature

One feature of my application involves dynamically adding events to the calendar. function AddEventSourceDetailed(act_id) { $('#calendar').fullCalendar('addEventSource', function (start, end, callback) { var startTime = Mat ...

javascriptjquerycalendarfullcalendar

Examining the scroll-down feature button

I'm currently experimenting with a scroll down button on my website and I'm perplexed as to why it's not functioning properly. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" c ...

javascripthtmlcss

Click on the jq toggle button to increase productivity and complete additional tasks

Is it possible to use a toggle function to create a drop-down menu while also rotating the mobile menu icon image when clicked? Can this be accomplished within the same function, or would I need to add a new event listener to the image? jQuery('#mobi ...

jquerytoggle

The functionality of bootstrap.styl malfunctions during the parsing process in stylus

I am attempting to incorporate stylus, a css preprocessor, with twitter bootstrap version 2.04. Upon downloading boostrap, I execute the command "stylus --css < bootstrap.css > bootstrap.styl" to generate a bootstrap.styl file. However, upon trying t ...

cssnode.jstwitter-bootstrapexpressstylus

Hide the scrollbars on the sidebar

I'm attempting to recreate a sleek scrollbar that caught my eye on the website . To achieve this, I need to have a screen larger than 955px in order to display the sidebar. However, when my sidebar overflows in the y direction, it causes an additional ...

javascriptcssreactjs

The jQuery error message "e.nodeName is undefined" indicates a timeout issue

<script type="text/javascript"> var delayFunction = (function() { var timer = 0; return function(callback, ms) { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); $(function() { $('#act ...

jqueryajaxtimeoutkeyup

Content in a div with a transparency level set at 50%

Within a div container, I currently have text displayed. The challenge that I'm facing is that the container itself has an opacity of 0.5, and I would like the text to be fully visible with an opacity of 1. Unfortunately, due to the constraints of th ...

csshtmlopacity

Creating a dropdown navigation menu using CSS from href divs

I am working on a script that includes divs with images and href functions for clicking on them. <div class="home"><a href="index.php?pagina=home"></a></div> <div class="events"><a href="index.php?pagina=events"></a& ...

htmlcss

The functionality of the jQuery function is disrupted when I navigate to a different page/row or perform a search for specific items

Recently, I created a JQuery function that deletes the selected row. Although I am aware of the DataTables option available for this purpose, I chose to implement it myself using just JQuery and JSON without relying on AJAX. However, a problem arises when ...

phpjqueryjsondatabasedatatable

Ensure that the background image adjusts appropriately to different screen sizes while maintaining its responsiveness

Currently in the process of developing a single page application using CRA. My goal is to create a hero image with an overlay at the top of the application using a background image. However, I'm facing issues with maintaining the responsiveness of the ...

cssreactjssass

HTML5 template design clashes with Smarty framework

I've been working with a simple pattern like this: <input type="text" pattern="[a-z]{2}" required ../> However, it never seems to be valid. The pattern doesn't seem to work as expected. I have only tested it in Firefox so far. Is there ...

regexhtmlcsssmarty

Center-align text so it is perfectly centered over an image

Looking for help with aligning text in social media images? Currently, the text is positioned at the bottom of each image. Check out this example: http://jsfiddle.net/uT4Ey/ CSS: .img { background-color: red; height: 3em; width: 3em; display: inl ...

htmlcss

What is the best way to access all sections of a JSON file containing nested objects within objects?

Here is an example of my JSON file structure: [{ "articles": [ { "1": { "sections": [ {"1": "Lots of stuff here."} ] } }, { "2": { "sections": [ {"1": "And some more text right here"} ] } } }] The c ...

javascriptjqueryhtmljson

Is there a way to only refresh the div specifically for the calendar with an id of "

$(document).ready(function() { $("#client-list").on("change", function() { var selectedValue = $(this).val(); location.reload(); }); }); Is there a way to refresh only the div with id='calendar' without refreshing the entire pa ...

javascriptjqueryhtmlajax

changing CSS styles

I'm struggling with what seems like a simple issue and can't find a solution anywhere. The HTML element I have is <div class="box"> It originally has this rule in its stylesheet: .box { width: 40%; } My Custom CSS sheet overwrites the o ...

htmlcss

Exploring the implementation of toggling functionality for nested children within <li> elements using jQuery

Unable to get the toggle function working on child nodes. Can someone assist me with this issue? $(document).ready(function() { $('label.tree-toggler').click(function() { $(this).parent().children('ul.tree').toggle(300); }); ...

javascriptjqueryhtmlcss

When utilizing customize-cra to modify antd less variables, it results in the generation of numerous redundant CSS files during the build

While utilizing customize-cra to override antd less variable, I have encountered an issue where it generates multiple duplicate CSS files during the build process. According to the documentation provided by antd, if I opt for the default import of CSS by ...

cssreactjssassantd

Transferring variables from CSS or HTML to inline SVG

I want to create a unique SVG star rating component using a single SVG. The shape consists of 5 stars filled with a horizontal gradient. Take a look at the following code snippet: <svg width="68" height="11" viewBox="0 0 68 11"> <linearGradi ...

htmlcsssvg

Divs in jQuery smoothly slide down when a category is chosen

As I work on a large website, I have hidden div tags in my HTML that I want to be displayed when a user selects a specific category. However, due to the size of the site, there are many hidden divs that need to be revealed based on different categories sel ...

javascriptjqueryhtmlslidecategories