When trying to display an image using CSS, the image does not appear on the screen

I've been working on streamlining my HTML code and moving as much as possible to my CSS file. However, I'm facing an issue with getting an image to display when writing the CSS code for it.

Here's the HTML:


<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<title>
Some title
</title>
</head>
<body>

<div id="pic1"></div>

<div id="pic2"></div>

<div id="top">

<h2 class="inner" id="banner">Some banner</h2>

    <ul>
        <li><a href="index.html" id="menu">Home</a></li>
        <li><a href="event.html" id="menu">Events</a></li>
        <li><a href="about.html" id="menu">Info</a></li>
        <li><a href="contact.html" id="menu">Contact</a></li><hr>
    </ul> 

</div>

The CSS:


#pic1
{
    position: absolute;
    background: #ffffff;
    background-image: URL('../images/pic1.png');
}

#pic2
{
    position: absolute;
    right: 0px;
    background: #ffffff;
    background-image: URL('../images/pic2.png');
}

#top
{
    height:100px;
    width:100%;
    color: #0565a8;
    text-align:center;
/*  background: URL(../images/top.png);
    background-repeat: repeat-x; */
    background-color:#0565a8;
    box-shadow: 0px 1px 1px #000000;
}

The pic1.png and pic2.png images are located in: \Websites\thispage\images

And my css is in: \Websites\thispage\images\css

I'm puzzled as to why this setup isn't working. I even tried moving the image to my css folder and changing the URL to ('austria.png'), but that didn't solve the issue.

Interestingly, using the following HTML code worked perfectly:


<div id="pic1">
<a href="index.html">
<img src="images/pic1.png">
</a>
</div>

However, I am determined to have everything controlled by CSS, not HTML.

Answer №1

There are two issues at play here: the image URL is incorrect, and no size has been specified for the elements, resulting in a zero-height.

To access the css folder within the image folder, you need to use ../ to navigate to it.

For example:

#pic1
{
    position: absolute;
    background: #ffffff;
    background-image: URL('../pic1.png');
    width: 200px;
    height: 100px;
}

Answer №2

Instead of putting your css folder inside the images folder, you should do the following:

file.html
/images
/css

This way, you can use background-image: URL('../images/pic2.png');

Answer №3

If you have a folder named css inside your images directory when you mention images/css, then you should use the following path:

URL('../pic1.png')

However, if you are referring to a CSS file within the images folder alongside the images, then the path should be:

URL('/pic2.png')

Additionally, as previously pointed out by Guffa, you must specify the size of background images, which can be in specific pixels, percentages, or using properties like background-size: cover, background-size: contain, etc.

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

Having trouble with your CSS on your mobile website?

After developing a website and implementing media queries for responsiveness, everything seemed to be in perfect working order. The website displayed flawlessly on emulators like () and Chrome's inspect element, mirroring my desired mobile design. How ...

Personalized Horizontal Radio Button Design

I have been struggling to achieve the desired design for radio buttons but without success. https://i.sstatic.net/TU7Ks.png Despite using bootstrap for my website, I am only able to achieve this: https://i.sstatic.net/WbzqS.png This is the code I am cu ...

You can move freely between classes A and B, as well as classes A and C, but there is no transition allowed between

A Brief Overview... Take a look at the HTML structure below: <div class="wrapper"> <div class="item above"></div> <div class="item active"></div> <div class="item below"></div> <div class="item ...

Eliminate JavaScript that blocks rendering:

Currently, I am working on optimizing my website's speed and aiming for a perfect 100/100 score on PageSpeed Insights. The website in question is www.chrispdesign.com. Despite my efforts to relocate the code and make necessary adjustments, I have bee ...

How to properly align a form with a multi-lined label in HTML and CSS?

I'm looking to create a form label that spans multiple lines and align the inputs with the labels. The goal is for the "Releasse Date" label to display as: Release Date (YYYY-MM-DD): [input box] Here's how it currently looks: https://i.sstatic ...

Mantine - Showing search results in a scrollable list that stops at the parent's height and then adds vertical scrolling

I am currently in the process of developing a web application that needs to occupy the entire height and width of the screen using 100vh and 100vw. The main app itself should not have any vertical or horizontal scrolling, but individual components/divs wi ...

The custom modal does not seem to be compatible with the CSS3 animation library,

I managed to create my own Full page modal successfully, but now I want to enhance it with an animation. I am attempting to use animate.css to add animation effects such as zoomIn or zoomOut, but it's not working as expected. Here is the link to my J ...

Troubleshooting the issue with a styled subcomponent in React using Styled Components

Recently, I've delved into React and have been experimenting with creating a Modal component using styled components. My goal is to achieve a similar effect to Framer Motion's motion.div, but utilizing styled components instead. Currently, I hav ...

Display corresponding div elements upon clicking an HTML select option

Is there a way to make a div visible when a corresponding select option is clicked, while hiding others? My JavaScript skills are lacking in this area. CSS #aaa, #bbb, #ccc { display:none; } The HTML (I'm using the same id name for option and d ...

Converting this HTML/PHP code into JavaScript: A step-by-step guide

I have been struggling to convert this code into JavaScript in order to set the document.getElementById().innerHTML and display it in HTML. Can anyone assist with writing this code in JavaScript? <form action='create_new_invoice.php?name="<?php ...

What is the best way to position three DIVs next to each other within another DIV while aligning the last DIV to the right?

I need help formatting a simple list item with three DIVs. The first DIV should be left justified, the second should be able to grow as needed, and the third should be right justified. I currently have them stacked side by side, but can't get the last ...

Angular 14: Exploring the left datepicker panel navigation in PrimeNG

In my situation, I am trying to adjust the position of the date-picker in relation to a panel displayed within a <p-calendar> element. Due to a splitter on the right side, I need to shift the date-picker towards the left. Here is the HTML code: < ...

Trouble concealing tab using slideUp function in Jquery

Whenever I click on the 'a' tag, it displays additional HTML content (list) that is controlled by generic JS code for tabs. However, I want to hide the list when I click on the "Title" link again. What can I do to achieve this? You can view a de ...

HTML and CSS: Focus on border for <td> cells only

I'm looking to apply a border to only one cell (B2) without nesting tables. Here's the code: <table border="0"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> ...

Issue found in Bootstrap-Multiselect plugin: The dropdown menu appears beneath the outer container when overflow-y is applied

My experience with using Bootstrap-Multiselect and encountering an issue where the dropdown disappears when the outer container has overflow-y: scroll and a max-height has prompted me to seek solutions. I am looking for a way to ensure that the dropdown is ...

There is an ample amount of blank space located at the bottom of the page

There seems to be an excess of white space at the bottom of my webpage, despite my efforts to adjust margins and padding. I've inspected the elements using browser developer tools but have been unable to pinpoint the issue. var chatResponseBox = do ...

Click event triggers the loading of a page

Recently, I found a simple jQuery event that loads a page into an iframe within the corresponding div when clicked. You can check out the JS Fiddle example here Now, my goal is to achieve the following: Instead of using separate codes for #fra ...

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Hey there, I need some help with toggling the opening and closing of a div when clicking on a toggle switch. $('.tog').on('click', function() { $('.cntr').show(); }); .switch { position: relative; display: inline-bloc ...

When clicking on HTML input fields, they do not receive focus

I am facing a puzzling issue where I am unable to access the input fields and textareas on my HTML form. The JS, HTML, and CSS files are too large for me to share here. Could someone provide guidance on what steps to take when troubleshooting this unusual ...

Failed validation for Angular file upload

I attempted to create a file validator in the front end using Angular. The validator is quite straightforward. I added a function onFileChange(event) to the file input form to extract properties from the uploaded file. I then implemented a filter - only al ...