Swapping out the background image on an element - using HTML and CSS

As I work on my portfolio, I have incorporated a gallery that I found online. Although I did not create the original gallery, I have customized it to suit my website and personal preferences. In the original version, the left and right buttons utilized arrow images. However, when I updated the CSS to use arrows from my own folder, they failed to display properly despite numerous attempts to rectify the issue. There is an extensive amount of code related to this gallery, so I will only be sharing the relevant CSS and HTML snippets.

It is perplexing because the same code functions correctly in the original version. I cannot determine if I accidentally altered something without noticing. Before anyone mentions it, please note that the file path is correct. All of my HTML pages are stored within a folder alongside an "Images" directory where all of my images, including next.png and prev.png, are located. If necessary, I am willing to provide screenshots, additional code, or any other information that may aid in resolving this dilemma. Thank you.

htmlcss

Answer №1

Consider uploading your image to a free hosting platform and use an absolute file path instead of a relative one.

#slide5:checked ~ #controls label:nth-child(4) {
    background: url('https://pbs.twimg.com/profile_images/555568875681480704/5Z6shg5R.png') no-repeat;
    float: left;
    margin: 0 0 0 -5px;
    display: block;
    background-color:#000;
}

Switching the image path resolved the issue for me.

Check out this Fiddle link

Answer №2

The example may not have the same buttons, but you have the freedom to use any buttons you prefer! Feel free to search for similar buttons in the source or create/find your own unique ones. For now, I've added random arrow images. Once you locate new arrow images, replace them at the designated spots mentioned in the comments. Good luck!

Check out the updated fiddle here:

https://jsfiddle.net/4nke76ye/2/

#cc-slider {
text-align: center;
margin: 0 auto;
max-width: 850px;
width:500px;
position: absolute;
left:45%;
padding-bottom:30px;
}
/* CSS code continues... */

If you need further assistance, feel free to ask!

Answer №3

Success! I've successfully made the switch.

background: url('../Images/Next.png') no-repeat;

This has been replaced with

background: url("Images/Next.png"); no-repeat;

Big thanks to all for the assistance!

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

Display the output of awk on a single line for specific columns

Here is a file called "test" that displays the following information: vserver share-name path acl TEST_SERVER TEST_SHARE_PATH /TEST/TESTSHAREPATH "test\testuser / Read","test\testuser1_R / Read","test\testuser2_RW / Change ...

htmlawk

difficulties arise when adjusting font size in html and css

When I first created an all HTML/CSS website, I used clickable images as a menu that scaled perfectly on all monitors and browsers. Now, for my new project, I wanted to use a background image for the menu with hyperlinked text on top. I thought setting the ...

htmlcssmenuscreen-resolutionfont-size

Steps to retrieve the ID after modifying the owl carousel orientation

How can I retrieve the current id after switching sides in a slider? Currently, it only shows the previous id when there is a change. JavaScript Solution: hometopowl.on('changed.owl.carousel', function(event) { var activeMenu = $(".body-top-sli ...

javascriptjqueryhtmlowl-carousel

css Issue with the "left" property

Is it possible to center the left side (left border) of a child div within its parent div? I tried using left: 50% in the CSS for the child div, but it doesn't seem to be working. Can anyone explain why? <div id="outher"> <div id="inner ...

htmlcsspositioning

The hover effect on the ul element is not functioning as intended

Has anyone encountered issues with hovering over ul elements not working? http://jsfiddle.net/Samfr/5/ <ul class="navi"> <li> <a class='light'> Item1 <div class="hover-name" style="display:none"& ...

javascriptjqueryhtmlcss

The horizontal scrolling with overflow-x is not functioning correctly as it is displaying the scrollbar for the vertical

I am perplexed as to why I am unable to scroll horizontally to view the other pink thumbs. Despite adding an overflow of scroll-x to the thumbs container, which should theoretically allow horizontal scrolling, it only seems to scroll vertically. Could som ...

htmlcss

How to customize the appearance of an HTML checkbox using custom images for a unique

Does anyone know how to change the default style for: <input type=checkbox...> I want it to use my own styled pictures instead of the default style. Can anyone help? Thank you! ...

htmlcss

CSS Tutorial: Creating a Dynamic Gradient Bar

I am looking to create a dynamic colored bar with a moving color gradient effect. Without using JavaScript, I want to achieve this effect using CSS 3 properties such as gradients and animations. This is a snippet of what I have tried so far: HTML: <b ...

htmlcss

Cover the <img ...> tag in HTML using JavaScript

I'm currently working on creating a simple game involving sliding ice-blocks. I ran into an issue while testing this JSFiddle and I'm looking to "hide" the image/button triggered by the line alert('Game starts!');. I attempted using sta ...

javascriptcsshtmlvisibility

Exploring the depths of Cordova's capabilities: implementing a striking 3D front-to-back screen flip effect

Recently, I came across an interesting app that had a unique feature. By clicking on a button, the entire screen would flip from front to back with a 3D effect on iPhone. It was quite impressive to see in action. The developer mentioned that he achieved t ...

javascriptjqueryioscsscordova

Creating a JavaScript function that responds to multiple click events

Can someone please help me out? I have the link to the output of my work below using JavaScript and HTML: My goal is for only one circle to be active when clicked, while the others are disabled. Currently, when I click on a circle and then another one, bo ...

javascriptjqueryhtml

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

javascriptjqueryhtmlcss

What is the difference between finding the XPath of immediate child text and all descendant text?

Looking to extract the top-level category from this structure: <ul class="categories"> <li>My top level category <ul> <li>my second level category</li> </ul> </li> </ul> ...

htmlxmlxpath

Tips on modifying the background color using bb code

I am currently working on creating a custom bbcode system. My goal is to change the format from [bg=color code]color text[/bg] to <span style="background-color:color code;">color text</span> Do you have any suggestions on how I can achieve thi ...

phpcss

Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...

javascriptjqueryhtmlcss

Trouble with z-index functionality in jQuery datatable

I'm struggling to get the Action Box displayed as an upper layer. I've already tried using z-index but it doesn't seem to make any difference. https://i.stack.imgur.com/rJ1vL.png $(document).ready(function () { ...

htmlcss

TranslateY animation glitching

I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...

javascriptcssvue.js

"HTML and JavaScript: The search functionality fails when trying to search for a string that is sourced from an array

Could someone assist me with a comparison issue I'm encountering? I am trying to use the includes() method to compare a list in a table with a list of names stored in a string. Strangely, when I hardcode the string directly into the includes() method, ...

javascripthtmlstringsearch

Having trouble transmitting POST values through AJAX requests

I am facing an issue with two separate files, bargraph.html and data.php. Here is the content of bargraph.html: <form method="POST" name="dataform" action=""> <select name="data1" id="data1-value"> <option value="DateRecorded">Dat ...

phphtmlmysqlajaxpost

When the user clicks, show a designated search result in a separate container

I've been developing my Angular cocktail application, and I've reached a point where I can display all the cocktails in my database (only showing names). Now, I want to implement a feature where if I click on a specific cocktail, its full content ...

javascriptjqueryhtmlangularjs