Unable to modify the background image of the button

Currently, I am working on this element

I am trying to insert a background image into the "Click" button, but I am not seeing any results. Here is the HTML and CSS I am using:

.cn-button {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 11;
    margin-top: -2.25em;
    margin-left: -3.78em;
    padding-top: 0em;
    width: 7.5em;
    height: 7.5em;
    border: none;
    border-radius: 50%;
    color: #f9d70a;
    text-align: center;
    font-weight: 700;
    font-size: 1.3em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    background-image:url('/css/clock.jpg');
}
<div class="component">
    <!-- Start Nav Structure -->
    <button class="cn-button" id="cn-button">Click</button>
    <div class="cn-wrapper" id="cn-wrapper">
        <ul>
            <li><a href="#"><span>07.45 Uhr</span></a></li>
            <li><a href="#"><span>07.55 Uhr</span></a></li>
            <li><a href="#"><span>08.15 Uhr</span></a></li>
            <li><a href="#"><span>08.17 Uhr</span></a></li>
            <li><a href="#"><span>10.47 Uhr</span></a></li>
            <li><a href="#"><span>13.20Uhr</span></a></li>
            <li><a href="#"><span>16.30 Uhr</span></a></li>
         </ul>
    </div>
    <!-- End of Nav Structure -->
</div>

Answer №1

Your background image is definitely visible, it's just too large.

To fix this, try adding background-size: 100%; to your CSS code and you should be able to see it properly :)

Answer №2

Experiment with this style attribute.

background-size: 100%;

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

What is the best way to center my image both vertically and horizontally?

Utilizing react.js to develop a template website has been my current project. The issue arose when I began constructing the first component of the site. The dilemma: The picture was not centered on the page, neither vertically nor horizontally. Despite ...

HTML snippet as implemented in Python

As someone who is new to Python and CGI, I have a question that may seem simple. I want Python to generate a block of HTML whenever a visitor loads a page. <html> <body> <!-- Beautiful website with great content --> <!-- Suddenly... ...

Using AngularJS to bind to the 'src' property of an <img> tag

There is a table on my website with numerous rows, and each row contains a preview image that should appear in the top right corner when the mouse hovers over it. I attempted to insert an image tag with AngularJS binding for the URL in the src attribute l ...

I'm baffled as to why the page is not loading despite my best efforts. Could someone please help identify where I went wrong?

My page isn't loading properly and I can't seem to figure out what's wrong. The error message that appears is: Page not found (404) Request Method: GET Request URL: http://127.0.0.1:8000/deals/2015/03/first-lady/ Django 1.6 Python 2.7 ...

Is there a way to keep my footer fixed to the bottom of the page in Google Chrome?

I recently made some updates to my aging website by adding a footer menu. However, I encountered an issue with the placement of the footer on Google Chrome. It appears too high, overlapping certain elements of the site. I attempted to resolve this problem ...

JavaScript radio button returning value as undefined issueThe problem with radio buttons

http://jsfiddle.net/jngpjbjm/ Take a look at the provided fiddle link. I'm having an issue where the radio button value is showing up as undefined. I can't figure out why this is happening. Any assistance would be greatly appreciated. <input ...

Scrape data from LinkedIn search results using HtmlAgilityPack

Looking to fetch the top search result for a LinkedIn query. Check out this fiddle: https://dotnetfiddle.net/Vtwi7g Passing this link to 'html' variable: Targeting the first result : Wondering how to pass credentials for logging into Lin ...

Unable to apply background-color CSS in playwright is not working as expected

I have been encountering an issue with applying the background-color CSS property in a Python template using the playwright package. I initially attempted to apply inline CSS style="background-color:red", then tried using a script tag with JavaScript, an ...

Build a dynamic table by leveraging JSON with the power of JavaScript and HTML

I'm currently working on creating a table where information is stored and updated (not appended) in a JSON file using JavaScript and HTML. The structure of my JSON data looks like this: [{ "A": { "name": "MAK", "height": 170, ...

Navigate to the element by clicking on the link, then apply a class to that specific element

I'm currently working with this HTML code: <div id="main"> <p>some text</p> <a id="goto-notes" href="#">see notes</a> <p>some text...</p> <div id="notes"> <p>notes here< ...

Text will not be visible within the div container

I'm working on a mobile layout design for my css project. My goal is to have the header and footer remain fixed on the screen while allowing users to scroll through the content in between. I was able to achieve the fixed positioning, but now none of m ...

Utilizing jQuery for animating SVG elements with dynamic color changes and scaling effects upon hover

Seeking assistance from coding experts! I have created an icon and am attempting to modify it so that the color changes when hovered over. Additionally, I want the white square to scale down by 50% starting from the top-left corner of its current position. ...

Discovering MaterialUI breakpoints within CSS styling

Working on a create-react-app project, I have incorporated material-ui 1.x and customized the theme with unique breakpoints... import { createMuiTheme } from '@material-ui/core/styles'; let customTheme = createMuiTheme({ breakpoints:{ val ...

Tips for effectively placing a page scope block using BEM

Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...

What is preventing this button from having a border-radius?

The red border is just for visual reference. I attempted using overflow: hidden but it didn't yield the desired outcome. My goal is to achieve the same border radius as the red border. Is there something amiss in my approach? Appreciate your assistanc ...

Is there a way to identify the specific list item that a draggable element has been dropped onto within a jQuery sortable with connected draggable lists?

Take a look at these two sets of items: user's inventory <ul id='list1'> <li>Apple</li> <li>Banana</li> </ul>available products <ul id='list2'> <li>Orange</li> ...

Experiencing trouble with setting values in JavaScript?

I have my code set up to display numbers 170 and 122 using Javascript, but I'm not seeing the expected output. <!DOCTYPE html> <html> <body> <button onclick="UidToPost()">Get It</button> <script> ...

Asynchronously updating a Django model instance in real-time

On my website, there is a button that allows users to view notifications as a drop-down without navigating away from the current page. I am interested in updating the unread field of every notification for a user from True to False when this button is clic ...

Learn the process of using Python to copy HTML code to the clipboard

I am attempting to create a simple script in Python on Windows 10 that can copy a customized text hyperlink (Example) to the clipboard and maintain its recognition as HTML when pasted, much like how Microsoft Word handles custom text hyperlinks. I have at ...

Looking for assistance with CSS styling

I've been attempting to align two custom fields on a checkout form next to each other, but I'm running into an issue where the fields below are overlapping. I've experimented with using clear: both/left/right; to address this problem, but it ...