The picture within the div is not appearing as expected

I am facing an issue with inserting an image in a div container using CSS and HTML. The image is not displaying properly.

Here is the HTML code:

<div id="wrapper">
<div id="quoteContainer">
 <span class="start_img"></span>
</div>
</div>

And here is the CSS code:

#quoteContainer {
    color: #898989;
    background:#F9F9F9;
    border: solid 1px #ddd; 
    border-radius:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    -webkit-box-shadow: 0px 0px 10px #888;
    margin:65px auto;
    padding:15px;
    width:500px;

}

.start_img {
     background: url(image/img1.png); 
     border: dotted 2px black;
     width:200px;
     height:20px;
}

Despite trying to add the image using the <img> tag, nothing seems to be working as expected. Is there something wrong with the code?

cssimagehtml

Answer №1

Due to its inline nature, a span element does not allow for arbitrary values for width or height. To address this, you can convert it to either a block or inline-block element (I believe there was a question about this yesterday) or ensure it contains content.

If you set the src property of an img element, it should function properly.

Additionally, as mentioned previously, in order for empty elements to display correctly across different browsers, consider including at least an &nbsp;.

Answer №2

Unfortunately, the span element is unable to have both a width and height due to its inline nature.

Have you experimented with this idea?

<div id="container">
<div id="imageWrapper">
 <img src="image/img1.png" />
</div>
</div>

Answer №3

To make a change, you should switch the span from being inline:

.start_img {
     background: url(image/img1.png); 
     border: dotted 2px black;
     width:200px;
     height:20px;
     display:inline-block;
    }

Additionally, ensure to insert content within the span.

<span class="start_img">&nbsp;</span>

Answer №4

if your content is extensive and elements are floating, make sure to float the divs and spans as well.

If an element is unable to take up width, consider adding:

display: block;

to your class.

Additionally, for your divs:

display: block;
width: 204px;
height: 24px;

However, as mentioned by Pekka:

<img src="#" class="blabla" alt="img" />

works perfectly fine.

Answer №5

It's possible that the image wasn't uploaded correctly. Take another look at your syntax to ensure everything is in order because these explanations all appear to be reasonable and sensible. You might want to try:

<section id="container">
<div id="imageHolder">
 <p class="image_start"><img src="http://www.yourImageStorageSite.com/path/to/image/picture.png"/></p>
</div>
</section>

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

Renaming form elements using JQuery's .load method

This is a page named A.html <form name=form> <input type=text id = txtA> </form> When I use jQuery to load it into B.html, it loads multiple times. <form name=form> <input type=text id = txtA> </form> <form name=f ...

phpjavascriptjqueryhtml

Clicking on the menu to reveal the dropdown options using JavaScript

I have created a drop-down menu for my website, but I am facing an issue. When I click on the links again, it does not work properly because I lack expertise in JavaScript. I would appreciate any help and suggestions from all of you. Thank you for your tim ...

javascriptjqueryhtmlcss

Eliminating white space - A CSS and HTML page with no room for gaps

After finally getting my website up and running using style.css, I am faced with the following CSS code: html { height:100%; } { position: relative; z-index: 0; width: 100%; left: 0; top: 0; cursor:default; overflow:visible; } body { ...

htmlcss

Enhance VideoJS using custom Ionic icons in a NextJS environment

I'm creating a platform for video content and I want to enhance the VideoJS player by incorporating icons from the Ionic set. However, as I typically use the <ion-icon/> tag to insert icons on my pages, I had to individually specify each icon&ap ...

cssnext.jsvideo.jsionicons

Size your grids in HTML5

I have designed an HTML5 grid for a website that consists of "big" squares containing 10 smaller squares each. However, I actually need there to be only 5 squares within each "big" square. Unfortunately, my skills in HTML5 are limited and I am struggling t ...

htmlsvg

Integrating additional youngsters into the HTML DOM using Angular.js

I am working with a block of HTML that looks like this: <div id="parent"> <div id="child_1"></div> <div id="child_2"></div> <div id="child_3"></div> <div id="child_4"></div> </div> ...

javascriptjqueryhtmlangularjsnode.js

Trying to align two divs side by side with the first one floating left and the second one fixed in position? Unfortunately

Here is an example that I have: https://jsfiddle.net/2z2ksLy4/ HTML: <div class="one"> test </div> <div class="two"> test2 </div> CSS: .one{ width:400px; border:1px solid red; min-height: 200px; float:left; display: ...

htmlcss

Tips for positioning icons inserted using the :before method

Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...

htmlcss

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

htmlcss

Creating CSS dynamically using PHP

Even after reading numerous blogs and forums, I'm still unable to get this working. My goal is to allow users to personalize their user account style sheet. I made sure to include <?php header("Content-type: text/css"); ?> at the beginning of t ...

phpcss

The issue of multiple columns not displaying correctly when set to a height of 100

I am struggling with a seemingly simple task. I want to create two columns on my page, each with a width of 50% and a height of 100% so they completely fill the screen side by side. However, no matter what I try, they do not align properly and end up float ...

jqueryhtmlcss

Utilize duplicate named CSS grid rows as a reference

Summary; This method currently works, but it requires adding multiple nth-child selectors for each new person and their answer. I am seeking a solution that can dynamically handle any number of rows using an even and odd selector to simplify the process. ...

htmlcsscss-grid

The text is exceeding the boundaries of its container, displaying in a single line that extends beyond the page

I am currently working on incorporating text into the project-details section by utilizing a rich text uploading field in Django admin. Despite inputting the text as a paragraph in the Django admin project description, it displays as a single line that ove ...

htmlcssdjangorich-text-editordjango-ckeditor

Is it possible to access the operating system's native emoji picker directly from a website?

While there are numerous javascript plugins and libraries available for allowing users to select emojis for text inputs, both Windows and Mac operating systems already have their own native emoji pickers accessible via ⊞ Win. or CTRL⌘Space. Is there a ...

javascripthtml

The issue of undefined database columns arises when attempting to transmit data from an HTML form to a MySQL database via Express

My primary objective is to develop a RestAPI using Node.js and test it in a small HTML application. With the guidance of my instructor, I successfully created the RestAPI based on an example and customized it to work with my own MySQL database. Testing ea ...

javascripthtmlnode.jsrestexpress

Retrieve the value of a variable from a JSON decoded response

My json response has been decoded into an array $data: stdClass Object ( [outboundSMSMessageRequest] => stdClass Object ( [deliveryInfoList] => stdClass Object ( [deliveryInfo] => stdClass Object ( [address] => 8606142527 [deliveryStatus] => ...

phphtmljsonresponse

The CSS properties intended for ion-button elements are not taking effect

I'm attempting to set a background color when a ion-button is clicked or maintain the ion-ripple effect after it has filled the button in Ionic 4. I experimented with applying custom CSS states in global.scss, but encountered issues where the active ...

cssangularionic-frameworkionic4

I am interested in displaying the PDF ajax response within a unique modal window

With the use of ajax, I am able to retrieve PDF base64 data as a response. In this particular scenario, instead of displaying the PDF in a new window, is it possible to display it within a modal popup? Any suggestions on how this can be achieved? $.ajax ...

javascripthtmljquery

Exploring jQuery's ability to retrieve CSS values

Is there a way to use jQuery to read a specific CSS value from a class? The situation is as follows: HTML: <div class="box"></div> CSS: .box { margin-top: 100px; } I want to determine if the .box class has a margin-top of 100px in order t ...

jquerycssreturn-value

Aligning inline form controls with Bootstrap and Syncfusion widgets

I'm facing a challenge aligning the Syncfusion JavaScript widget - a dropdownlist - to be displayed inline with the label. I am using Bootstrap 3. I haven't been successful in achieving a nice alignment, meaning getting the middle of the label p ...

htmlcsstwitter-bootstrapsyncfusion