Unable to change background image to an external image link

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div style="background-image:url("https://example.com/images/lareg/1.JPG")"></div>
            <div style="background-image:url(pages/2.jpg)"></div>
            <div style="background-image:url(pages/3.jpg)"></div>
            <div style="background-image:url(pages/4.jpg)"></div>
            <div style="background-image:url(pages/5.jpg)"></div>
            <div style="background-image:url(pages/6.jpg)"></div>
            <div style="background-image:url(pages/7.jpg)"></div>
            <div style="background-image:url(pages/8.jpg)"></div>
            <div style="background-image:url(pages/9.jpg)"></div>
            <div style="background-image:url(pages/10.jpg)"></div>
            <div style="background-image:url(pages/11.jpg)"></div>
            <div style="background-image:url(pages/12.jpg)"></div>
        </div>
    </div>
</div>

How can I update the local image to an external image? I've tried changing the path to a "link" but it's not working. Could there be an issue with the code?

css

Answer №1

Always remember to use single quotes when creating a link string

<div style="background-image:url('http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_background.png')"></div>

It's crucial to ensure that your image is indeed a valid link

UPDATE

In addition, you must include the height and width as pointed out by @Julius Guevarra

Answer №2

Ensure to provide both a width and height for the div

<div style="background-image:url(https://example.com/images/lareg/1.JPG); width: 300px; height: 300px;">

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 bridge the distance between a shrunken iframe and the following element?

https://i.sstatic.net/AZ7T4.png My iframe was resized to 65%, but the containing "div" still occupies the original iframe size, creating a large gap between the iframe and the next element. I'm not sure how to remove this gap. I want the next element ...

htmlcss

Achieving a perfect curve with a specific circle radius using CSS

I came across a design tutorial on magic indicators from YouTube and created the following design: https://i.sstatic.net/IJjdCGWk.png However, I am looking to achieve a smoother curve as a continuation of the circle when selected, instead of using element ...

css

What is the method to retrieve the class name of an element when the div is created as '<div id 'one' class="element one"></div>'?

I have three elements named one, two, and three, declared as seen below: <div id =container> <div id 'one' class="element one"></div> <div id 'two' class="element two"></div> < ...

javascripthtmljquerycss

Transforming RGBA, HSL, and HSLA color values into RGB format, or encapsulating them within a java.awt.Color instance

Seeking information on algorithms that can convert RGBA, HSL, and HSLA colors to RGB colors, or a Java library that performs this conversion and returns a java.awt.Color object. Any recommendations or assistance would be greatly appreciated! ...

javacssrgbrgbahsl

Arrange the navigation bar in a straight line

I am facing an issue with my navigation bar... I want it to be centered but it is not working. I want it to fill from left to right. I have tried using the following CSS: text-align: center in .navbar a text-align: center in navbar. .navbar { backgr ...

htmlcssnavigation

Tips for preventing divs from sliding to the next row when adding margin in Bootstrap

{% for plant in plants %} {% if forloop.counter0|divisibleby:3 %} <div class="row row-cols-3"> {% endif %} {% include 'included/_plant_cell.html' %} {% if forloop.counter|divisibleby:3 %} </div&g ...

htmlcssdjangobootstrap-5

Whole page scrolling instead of just inner div scrolling

Once again, I find myself tinkering with CSS... In the current setup, the map container is scrolling on its own, separate from the rest of the content within the container. How can I enable the entire page to scroll when additional content is added to the ...

htmlcsslayout

The paragraph tag remained visible despite the use of the hidden display property

Can you help me figure out why my code isn't working with .d-none .d-sm-block? <div class="container"> <div class="row row-content align-items-center"> <div class="col-12 col-sm-12"> <h2>heading 1&l ...

htmlcssbootstrap-4display

What methods can I use to minimize the gap between images within the <figure> element?

    Is there a way to adjust the spacing between images when using <figure>? I've been trying to reduce the space, but I can't seem to make it work. I want to display 3 images side by side in one row, but because I'm struggling to ...

htmlcss

What is the best way to personalize the icon for this navigation button?

I'm interested in making some changes, especially to the border. I've already figured out how to adjust the color of the 3 bars like so: .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } Modification RESOLUTION .navbar- ...

csswordpress

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...

javascriptcsstwitter-bootstrapangulartypescript

Link Formatting Instructions

https://i.sstatic.net/PZVKx.png I am trying to style the right element to look like the one in the image, but when I apply the 'pull-right' class, it unexpectedly affects the width of the element below it. <a class="pull-right">My link< ...

htmlcssflexboxbootstrap-4

Having trouble accessing listview capabilities in jquerymobile?

I am currently delving into the world of jquerymobile. I am experimenting with a sample project where I aim to showcase a listview. Below is the code that I have been working on. <!doctype html> <html> <head> <link rel="stylesheet" h ...

jqueryhtmlcsslistviewjquery-mobile

Separate Your Navbar with Bootstrap 4 Separators

I'm facing a challenge in adding separators within a navigation bar between the navigation items. I am unsure how to evenly space out the padding on these separators next to each navigation item. https://i.sstatic.net/vjYti.png Another issue I encou ...

htmlcssbootstrap-4

PHP loop that generates gaps between the buttons

My current challenge involves using a while loop to dynamically generate buttons based on the `outcomeId` count. However, I am facing an issue where the buttons created by the loop have gaps between them. <div class="outcomes"> <?php ...

phphtmlcss

What significance does the symbol "'" hold in the ng-style attribute?

Can someone explain the purpose of the " \' " in this code snippet? <div ng-style="{ \'cursor\': row.cursor }" Is there a reason why it can't be written simply as <div ng-style="{ cursor: row.cursor }" Here is ...

cssangularjs

Enforce a line break in flexbox and display items in the next column

Is there a way to break an item in a flexbox and display it at the beginning of the next column, based on the max height of the box? See the image below for reference. .flex{ display:flex; flex-direction:column; flex-wrap:wrap; max-height:200px ...

htmlcssflexbox

What is preventing me from clicking on the left side of the link on this CSS flip card while using Chrome browser?

When attempting to click the left side of the link on the back of this flip card in Chrome, it does not respond. However, hovering over the right side allows interaction with the link: /* Vendor prefixed by https://autoprefixer.github.io */ .card { ...

htmlcsswebkitcss-transforms

Other elements remain unaffected by the CSS transition

Hey everyone, I have a school project where I'm working on animating certain objects. I've successfully implemented CSS transitions, but I'm having trouble with other elements being affected by the animation. I've seen advice about usin ...

htmlcssangularjsanimationtransition

How can I position a logo slightly off center to the left, rather than all the way to the left?

I attempted to implement this code: <div id="logo" style="background-image: url('http://comprogroup2ict2b.rf.gd/logo.png'); width: 100px; height: 50px; background-size: contain; background-repeat:no-repeat; float: left"> ...

htmlcss