Here is the URL for an image I am working with:
URL:
Currently, I am having an issue in my CSS:
background: url(http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-(1)-340x340.jpg)
The problem arises due to the presence of brackets in the URL.
I have attempted to escape the bracket, but it did not work. Any suggestions?
I am using Rails and SCSS.
Thank you
Here is a quick tip: Add a \ before the brackets.
<span></span>
span {
background: url(http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-\(1\)-340x340.jpg);
width: 300px;
height: 300px;
}
Substitute brackets with encoded bracket characters:
span {
background: url(http://www.jennifersmith.co/image/cache/data/Summer%20Collection/Sandals/BREEZY-9-BROWN-%282%29-400x400.jpg);
width: 350px;
height: 350px;
}
Enclose the URL within quotation marks:
background: url('http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-(1)-600x600.jpg')
No matter how much I tried, I couldn't solve the problem of my list not appearing in the same line. I attempted using display: inline-block; and padding: 0, but to no avail. /* added by editor for demonstration purpose */ body { background-color: ...
Recently, I have been working on designing the mobile version of a website. However, I noticed that when I try to scroll quickly on my phone, the scrolling gets interrupted and I have to wait for it to catch up. I am using the fullpage.js library in this ...
Do you need help with centering text and a player on your WP site? Check out my website Here is the code I am currently using: <div class="listen_section"> <div class="container"> <div class="row"> <div class ...
Creating grid elements in Bootstrap 3, I am faced with a challenge. When the viewport is below <768px, I want to align a button in the same position as shown in the image with the lion. Check out the demo site here. For viewports >768px, the button ...
I have a question about my top navigation bar animation. While scrolling down, it seems to be working fine but the animation comes with a fade effect. I would like to achieve a slide-down effect for the background instead. Since scrolling doesn't trig ...
To display the 3 icons, I am using https://boxicons.com/. You can find the code here. Additionally, I would like to download the icons and store them in a folder. Here is the result with uploaded images: https://i.sstatic.net/Qsu9k.png I encountered two ...
Within my table StoreCodes, I hold distinct product codes (along with their availability) for each store. For example: category:integer code:string available:boolean store_id:reference I am currently working on creating a straightforward table with 3 col ...
https://i.sstatic.net/SuGiM.png I am looking to convert the grid layout shown above into the grid layout displayed below. To achieve the above layout, I have used the following grid structure: <div className="row"> <div className=&q ...
I work with the angular-material framework and specifically utilize its <md-select/> component. I am interested in styling its icon: https://i.stack.imgur.com/g4pu1.png In the past, we would modify its css by targeting the class .md-select-icon, ...
In my current rails app, I am working on the contributors page. Each member's name should be displayed centered beneath their respective images. Any assistance with this would be greatly appreciated. Below is a snippet from my member.html.erb file ...
One of my functions alters the background of the tinymce editor. However, I am interested in having a wallpaper repeat in a similar fashion to background-repeat: repeat; in CSS. How can I achieve this? Here is the function: function SettinymceImage(bg_i ...
Update: The Turnip portion seems to be misleading. The issue persists when running rspec natively on its own. Example command: bundle exec rspec spec/features/subscription_spec.rb:33 Errors: Failures: ...
I've encountered a very peculiar issue. Whenever I use the page down or fragmented identifier to jump to a specific div, my "go to top" image disappears. Here is the code snippet: HTML: <a title="Go to top" href="#" class="back-to-top"></ ...
Looking for help with my mobile navigation setup. I want to add text that says ' ...
Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything a ...
Seeking a deeper understanding of flexbox alignment, I decided to experiment with aligning content using only flexbox properties. One puzzling observation is how "justify-content" centers items with single lines of text (flex-item-1 and flex-item-5), but n ...
Currently, I am developing an angular application that connects to a Rails backend and interacts with the database through API calls to receive JSON objects. My challenge lies in defining multiple scoped variables within a controller. At the moment, I have ...
Could you take a look at the scenario below? I'm attempting to position my yellow div beneath the red div and on the left side of the lower part of the green div. When I apply clear: left, it moves down but leaves empty space above it. Is there a way ...
I am tasked with creating an ASP.NET MVC page that will display a template of controls. The controls will be retrieved from an XML file. One issue I am facing is that the number of controls is not fixed, so the page height needs to be dynamic. Our site has ...
I'm attempting to extract all the links nested within the div class news column index. Here is a snippet of the HTML structure: https://i.stack.imgur.com/zdFWS.jpg Below is the code I have used, but unfortunately, it's not yielding any results. ...