logo
down
shadow

Some images not working in `background-image:url()`


Some images not working in `background-image:url()`

By : user3100195
Date : January 12 2021, 01:40 AM
I hope this helps you . Some images not working in background-image:url(), i cant figure out that does i need to remove ( and ) from image name or anything else is an issue? , Escape special characters (\ in front of ( and )) in the URL.
code :
<!-- Use CSS escape character to escape special characters -->

<div style="background-image:url(https://ignite.galify.com/images/tx9gyzjfb24712-\(1\).jpg)"> img </div>


<!-- Working -->

<div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div>
<!-- Use single quote (') to enclose image URL -->

<div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div>
<!-- Working-->

<div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1
</div>


Share : facebook icon twitter icon
CSS3 background-image with bundled sprite image based on images with different original Image Size

CSS3 background-image with bundled sprite image based on images with different original Image Size


By : kenzy imamura
Date : March 29 2020, 07:55 AM
around this issue Ok . So far nobody answered so i decided to choose answer 2. Via calculation! I ve created an Image processing service for web development which handles all the stuff automaticaly at https://github.com/s-a/scream-js if somebody is interested.
Background image path is not working even when I use url('../../images/image.png')

Background image path is not working even when I use url('../../images/image.png')


By : BrainAmplifier1820
Date : March 29 2020, 07:55 AM
Hope this helps Based on your directory structure, your image is in a folder one level above current location and not two. Which is why you need to use ../ as suppose to ../../
Try this: '../images/hrm_taustakuvan_verkko.png'
React background image style not working with local images

React background image style not working with local images


By : rajender ameelpur
Date : March 29 2020, 07:55 AM
I wish this helpful for you If you are using create-react-app, you need to import the image using a Javascript module:
code :
import nattklunn from './img/Nattklunn.png'; // import logo from '/img/Nattklunn.png'; if img is a folder at root.

[...]

const songs = [{'title' : 'Nattklubb',
                'author' : 'DigohD',
                'image' : nattklunn},

                {'title' : 'LED Beluga',
                'author' : 'DigohD',
                'image' : nattklunn},

                {'title' : 'LED Elephantasia',
                'author' : 'DigohD',
                'image' : nattklunn}
                }]
function LBoxContent(props){
    return <div className="lBoxContent" style={lContentStyle(props)}>
        {songs[props.index].title}
        <br />
        {songs[props.index].author}
    </div>
}

function lContentStyle(props){
    return {backgroundImage: `url(${songs[props.index].image})`}
}
background-image not working with local images?

background-image not working with local images?


By : Uriel Arbelaez
Date : March 29 2020, 07:55 AM
wish of those help I tried everything to make background image display with my local images. I know that I have the correct image location. because if I use content:url(); it works. , Your missing your "" quotes
Why isn't no-repeat working for these background images and how do I get the list text to not sit on top of the image?

Why isn't no-repeat working for these background images and how do I get the list text to not sit on top of the image?


By : Thomas Carstensen
Date : March 29 2020, 07:55 AM
this one helps. In answer to your updated question here is a new answer. Although your method will technically work by simply adding some left padding to your anchor and adding a list-style:none; to your .follow class I thought it best to provide a new solution that you can reuse in the future.
code :
.follow {
  list-style:none;
  position:relative;
}
.follow:before {
  content:'';
  position:relative;
  display:inline-block;
  width:20px;
  height:20px;
  top:7px;
  background-repeat:no-repeat;
}
.facebookicon:before{
  background-image:url('https://www.botanical-art.baeecorp.org/wp-content/uploads/facebook-icon-16x16.png');
}
.flickricon:before {
   background-image:url('https://www.botanical-art.baeecorp.org/wp-content/uploads/fluid-flickr-logo-16x16.png');
}
.pinteresticon:before {
   background-image:url('https://www.botanical-art.baeecorp.org/wp-content/uploads/pinterest-logo-16x16.png');
}
.twittericon:before {
   background-image:url('https://www.botanical-art.baeecorp.org/wp-content/uploads/twitter.gif');
}
.rssicon:before {
   background-image:url('https://www.botanical-art.baeecorp.org/wp-content/uploads/rss-logo-blue-bullet-16x16.png');
}
<ul class='follow-background'>
  <li class='follow facebookicon'><a href='#' title='' rel='nofollow'>Facebook</a></li>
   <li class='follow flickricon'><a href='#' title='' rel='nofollow'>Flickr Photo Albums</a></li>
   <li class='follow pinteresticon'><a href='#' title='' rel='nofollow'>Pinterest</a></li>
   <li class='follow twittericon'><a href='#' title='' rel='nofollow'>Twitter</a></li>
   <li class='follow rssicon'><a href='#' title='' rel='nofollow'>News Announcments ( subscribe to get our latest posts ) </a></li>
  
</ul>
.follow {
background-repeat:no-repeat;
}
Related Posts Related Posts :
  • Unable to display 3 columns in same row in printed page using bootstrap
  • How to achieve selection of radio element on click of label
  • Heading elements appearing below content
  • How do I position a side section or div in relation to nav bar?
  • How to maintain button location regardless of image size
  • Flex Layout not following flex percentages
  • How to add an icon preview to a html list of google store apps?
  • How to hide element overflow without cropping inline images/text?
  • Margin-Top is not working for me when attempting to adjust the location of a button
  • When I send a letter to the mail gives an error 'tuple' object has no attribute 'get'
  • How can i intentionally access the "Index of /" page on my local server?
  • Unable to position a image and text side by side using css/html
  • Text not re-displaying on click of button
  • How to use href attribute in a link tag accurately in android?
  • Repeated reference of classes causing text margins to shift
  • Are my home and about links hyperlinking to the right pages?
  • Tinted background image not working with Bootstrap
  • How can I stop my parallax div having a blurred background?
  • CSS hover effect to modify another element is not working
  • why section-testimonial is not placing correctly
  • Why doesn't my media screen query work, I can't make my website responsive?
  • Aligning inline-block elements horizontally
  • How do I display TypeScript code in "<code>" tags in an Angular app?
  • How can I change the color of input tag in a form when focusing on it?
  • How do I put a container in a fixed position with its own overflow?
  • How to fix text-alignment
  • Outlook not displaying a portion of HTML
  • Remove radio button text only with CSS
  • How to use "v-if" in Vue.js to render a <span> only if parent div has a specific property?
  • How to Extract just the Date from Angular Material Datepicker
  • @keyframes not working, I have tried everything i can think of
  • Bootstrap fix form to bottom of the page
  • How to hide a list element in html
  • How to stop repeating image
  • Angular - String interpolation of undefined variable
  • Is there any way to edit specific Column of table using mat-table in Angular material
  • How can I set a text as a shadow for a heading element?
  • How to fix the forms making the buttons overlap
  • Splitting XML into multiple HTML pages with XSLT?
  • How to justify empty divs in flex container
  • How to blur in CSS only one layer of when you have multiple layers in background-image?
  • Scrollable html table with fixed first row and first column, along with angular material controls within the cells of ta
  • In Django, how to extract ID attribute from html Input tag, WITHOUT using django forms
  • how to fix link tag in html after changing css
  • How do I add a top padding to the second row?
  • Is it possible to split XML into multiple HTML pages with page navigation?
  • AngularJS: responsive height in bootstrap
  • Hide second line of text with CSS
  • repeating-linear-gradient not working in Edge browser and internet Explorer Browser
  • how to make search and form category merges like amazon on bootstrap
  • Bootstrap: Rearranging rows into columns and changing the order of elements
  • How can I move a label under a text box?
  • How save LinearGradient To database
  • How to reposition an image with a linear gradient using css?
  • HTML audio will not play when page opened by batch file
  • CSS Three Tone Diagonal Background
  • How to use slots inside of template components in HTML
  • Using span tags in meta description & title, for dual languages
  • How to make an icon/span selectable by pressing Tab key?
  • Add dynamic margins using UI Kit
  • shadow
    Privacy Policy - Terms - Contact Us © festivalmusicasacra.org