Guide on how to retrieve a button background image from another website in PHP using the style attribute

When I try to open a gif file at this URL (http:/www.adlogic.com.au/recruiter_skin/rubicor/jamesgall/template/myWebsite_def_templ/roundbutton2.gif) in a browser, it opens without any issues.

However, when I add the same gif URL in a style attribute, the gif does not load. Below is the code snippet:

<button 
    style="BACKGROUND-IMAGE: url(http:/www.adlogic.com.au/recruiter_skin/rubicor/jamesgall/template/myWebsite_def_templ/roundbutton2.gif) !important; 
           BORDER-BOTTOM: 0px; 
           TEXT-ALIGN: center; 
           BORDER-LEFT: 0px; 
           PADDING-BOTTOM: 4px; 
           TEXT-TRANSFORM: uppercase; 
           PADDING-LEFT: 0px; 
           WIDTH: 130px; 
           PADDING-RIGHT: 0px; 
           DISPLAY: block; 
           COLOR: #fff; 
           FONT-SIZE: 11px; 
           BORDER-TOP: 0px; 
           CURSOR: pointer; 
           FONT-WEIGHT: bold; 
           BORDER-RIGHT: 0px; 
           TEXT-DECORATION: none; 
           PADDING-TOP: 4px">Email to a Friend</button>

It seems that I am encountering this issue because the gif is being used on a different domain.

cssimagebutton

Answer №1

There appears to be a missing forward slash in the image URL: http://www...

If you paste the image URL into your browser's address bar, most browsers will automatically add the missing slash for convenience. However, it seems this auto-correction does not apply to files referenced through CSS.

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

Can a webpage be redirected to another page after an animation using only HTML and CSS?

My goal is to design a landing page that has a button allowing users to trigger an animation before being redirected to another page. This concept involves adding a captivating element before transitioning between pages, similar to a link with a dynamic ...

htmlcss

Create a fixed left column in Bootstrap that stays in place until the footer comes into view

I'm currently working on adding a left-hand column to my website that will stick in place when scrolling down, then switch to an absolute position at the bottom once it reaches the footer. As the user scrolls back up, the column should become fixed ag ...

jquerycssbootstrap-4

Troubleshooting Bootstrap 4 Button Alignment on the Right

I am a newcomer to Bootstrap 4 and I am in the process of creating a straightforward page with it. Within my navigation bar, I have successfully added a logo and company name on the left side. However, I am encountering difficulty in placing two buttons on ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Is it possible to disable the save option on a PDF popup window?

When displaying a PDF using an embed tag, I have managed to disable print and content copying through document properties. However, I am struggling to find a solution to disable the save option that pops up. Is there a way to achieve this using JavaScrip ...

c#jquerycssasp.net

What are the steps for integrating a CMS with my unique website design?

Currently, I am in the process of creating a unique website for a client using my own combination of html, css, and JavaScript. There is also a possibility that I may incorporate vueJS into the design. The client has expressed a desire to have the ability ...

javascriptcsswordpresshtmlcontent-management-system

What is the best way to align checkboxes perfectly alongside the rest of the text within the text box?

I need the checkbox to be positioned under the text boxes in a aligned manner. Even though I used the CSS code below to align the text boxes, the checkboxes are not properly aligned: label { width:135px; clear:left; text-align:right; p ...

htmlcss

"Concealing specific choices in Autocomplete with reactjs: A step-by-step guide

I am looking for a way to hide the selected option in a Dropdown menu so that it does not appear in the next dropdown. For example, if "Hockey" is selected in the first dropdown, it should not be displayed in the second dropdown; only "Baseball and badmint ...

cssreactjsmaterial-ui

Managing image elements as attributes in React using styled-components

In my React project, I am working towards eliminating the use of .css files. Currently, I am refactoring existing .css code to utilize styled-components in a Typescript React project. Previously, images were included as backgrounds in a .css class a.item. ...

cssreactjstypescriptstyled-components

Is there a way to prevent this <li> tag from collapsing?

https://i.sstatic.net/8ulvX.png Yellow is currently the color of <li> elements that are children of <ul>. However, if I apply either a float or display property to the <li> or <ul>, the appearance changes. https://i.sstatic.net/lP ...

htmlcssdebugging

Comparing the impact of mixins styles versus additional style rules

I have customized mixins for a red button. For example: .btnRed{ background:red; color:white; border-radius:3px; min-width:200px; font-size:18px; } I typically use this to style my main buttons, but for one specific button, I n ...

csslessmixins

Ways to shorten a card

Below is a snippet of code that I have been working on. <div class="thim-course-grid"> <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <div class="lpr_course <?php echo ' ...

phphtmlcss

Creating a container that scrolls horizontally

I am working with ngbootstrap and angular, however, I believe the issue at hand is more related to html/css. My goal is to create a container that scrolls horizontally, despite coming across several helpful threads on this topic, I am struggling to impleme ...

htmlcssng-bootstrap

The issue with grunt-contrib-compass not functioning properly within npm

I recently installed npm and grunt, followed by installing grunt-contrib-compass. However, when I try to run grunt, I encounter the following error: Running “compass:dist” (compass) task Warning: not found: compass Use –force to continue. Aborted du ...

csssassnpmgruntjscompass

Steps for setting all textareas on a website to "readonly" mode

My website contains numerous textareas but they currently do not have the read-only attribute. It would be very time-consuming to manually add the readonly attribute to each one. Is there a more efficient method to make all textareas read-only? ...

javascripthtmlcss

Combining an image and a card in Bootstrap 5: a step-by-step guide

Is there a way I can align an image and a card in the same line like in this example? I want the image and card to be combined in one line, but when the page is viewed on mobile devices such as Android or iOS, I want the image to appear at the top with th ...

cssbootstrap-5

The ImageView remains unchanged despite attempting to load a new image

Attempting to choose an image from the user's phone and updating an image view with said image has proved to be a challenging task. Despite reaching the designated breakpoint and being able to manually change the image view elsewhere, the update proce ...

iosswiftimageuiimagepickercontroller

Is it possible to export CSS stylesheets for shadow DOM using @vanilla-extract/css?

I have been exploring the use of @vanilla-extract/css for styling in my React app. The style method in this library exports a className from the *.css.ts file, but I need inline styling to achieve Shadow DOM encapsulation. During my research, I came acros ...

javascriptcssreactjsstitchesvanilla-extract

Modifying the display property of an element using JavaScript

Hello, I'm encountering an issue with a section of my javascript code. I am attempting to make the #showAddress element display as block when the deliverservice radio button is clicked or checked. I have tried searching for solutions on Stack Overflow ...

javascripthtmlcss

Position the text alongside the thumbnail rather than in the center

In the current setup, my username text is positioned in the center of the view. I want to reconfigure it so that it displays directly to the right of the thumbnail. However, removing the alignItems: 'center', property from the item disrupts the e ...

javascriptcssreactjstypescriptreact-native

Trouble arises when implementing personalized buttons on the Slick JS slider

Are you struggling to customize buttons for your Slick Slider JS? I am facing a similar issue with applying my own button styles to the slider. I am interested in using arrow icons instead of the default buttons. Here is the HTML code snippet: <secti ...

javascriptjqueryhtmlcss