Unable to Display CSS Background

Hey there, I've been experimenting with CSS backgrounds to create a header line consisting of 5 equally sized portions, each in a different color. I'm having trouble getting the background to display properly. Below is the code I have written. Any assistance would be greatly appreciated. Thank you!

HTML:

<div id="div-line">
    <div class="blockOne"></div>
    <div class="blockTwo"></div>
    <div class="blockThree"></div>
    <div class="blockFour"></div>
    <div class="blockFive"></div>
</div>

CSS:

    #div-line {
    width:100%;
    height:5px;
}

.blockOne {
    width:20%;
    background-image:url(../images/orangeBlock.png);
    background-repeat:repeat-x;
}

.blockTwo {
    width:20%;
    background-image:url(../images/blueBlock.png);
    background-repeat:repeat-x;
}

.blockThree {
    width:20%;
    background-image:url(../images/darkOrangeBlock.png);
    background-repeat:repeat-x;
}

.blockFour {
    width:20%;
    background-image:url(../images/orangeBlock.png);
    background-repeat:repeat-x;
}

.blockFive {
    width:20%;
    background-image:url(../images/BlueBlock.png);
    background-repeat:repeat-x;
}
htmlcssbackgroundbackground-image

Answer №1

To arrange the DIV elements properly, you must use float and set a height. Here is a functional DEMO

We have included a general CSS class block in the HTML:

<div id="div-line">
    <div class="block blockOne"></div>
    <div class="block blockTwo"></div>
    <div class="block blockThree"></div>
    <div class="block blockFour"></div>
    <div class="block blockFive"></div>
</div>

We have made adjustments to the CSS:

    #div-line {
       width:100%;
       height:5px;
    }

    .block {
      height:100%;
      float:left;
      width:20%;  
    }

    .blockOne {
       background-color:red;   
    }

    .blockTwo {
        background-color:black; 
    }

    .blockThree {
        background-color:red; 
    }

    .blockFour {
            background-color:black; 
    }

    .blockFive {
           background-color:red; 

    }

Answer №2

To achieve this effect, consider using the CSS property background for color. If your div elements are not appearing as expected, ensure you specify a height for them and float them to the left.

#div-line div {
    float:left;    
}

#div-line {
    width:100%;
    height:5px;
}

.blockOne {
    width:20%;
    height:100%;
    background:#00FFFF;
}

.blockTwo {
    width:20%;
    height:100%;
    background:#FFA500;
}

.blockThree {
    width:20%;
    height:100%;
    background:#00FFFF;
}

.blockFour {
    width:20%;
    height:100%;
    background:#FFA500;
}

.blockFive {
    width:20%;
    height:100%;
    background:#00FFFF;
}

View a working example here.

Answer №3

What is the advantage of using background images over background-color?

If you opt for background color, it can help lighten the load on the server.

.blockN {
 width: 20%;
 background-color: #0094ff; // or choose your own color
}

Answer №4

Implement a similar approach

.blockOne {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockTwo {
width:20%;
background-image:url(images/blueBlock.png);
background-repeat:repeat-x;
}

.blockThree {
width:20%;
background-image:url(images/darkOrangeBlock.png);
background-repeat:repeat-x;
}

.blockFour {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockFive {
width:20%;
background-image:url(images/BlueBlock.png);
background-repeat:repeat-x;
}

OR

.blockOne {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockTwo {
width:20%;
background-image:url(./images/blueBlock.png);
background-repeat:repeat-x;
}

.blockThree {
width:20%;
background-image:url(./images/darkOrangeBlock.png);
background-repeat:repeat-x;
}

.blockFour {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}

.blockFive {
width:20%;
background-image:url(./images/BlueBlock.png);
background-repeat:repeat-x;
}

The task you are attempting to accomplish, such as 

background-image:url(images/orangeBlock.png)
, is typically done in a Linux environment.

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 reason behind Firefox opting for a 2x image while Chrome goes for a 1x image when the devicePixelRatio is 1

When deciding between 1x and 2x options: Firefox will opt for 2x if devicePixelRatio is less than 1 Chromium will choose 2x if devicePixelRatio is less than 1.5 Testing this in Safari is tricky as devicePixelRatio remains constant even when scaling t ...

htmlimagefirefoxchromiumsrcset

Browsing through tabs to locate specific text

Currently, I am developing a feature for a Chrome extension and I could use some assistance in debugging. The feature involves retrieving a user's input as a string from a text box on popup.html and then scanning through all the open tabs in the curr ...

javascriptjqueryhtmlgoogle-chrome-extension

Ways to eliminate the final empty space in a grid

Looking to create a layout with 5 boxes? Currently, I have managed to set up the grid structure, but the issue is that there is still some space below the last item in the grid. Below is the styled component for Container: const Container = styled('di ...

cssmaterial-uicss-grid

The caption below the image is not functioning correctly when hovering over it

I'm having trouble getting the text to appear correctly underneath the image. Whenever I hover over the image, the text seems to overlap it. I am sure there is a simple solution to this issue, but I can't seem to figure it out. Removing the inlin ...

javascriptjqueryhtmlcss

While using Tcpdf, I encounter an issue where the textarea value I pass is not being printed in the desired format

Currently, I am experimenting with TCPDF to create PDF files from HTML. However, I have encountered an issue where passing a variable containing text results in the text being printed on separate pages for each line. Is there a way to ensure that the tex ...

phphtmltcpdf

Creating an interactive website by utilizing fundamental HTML/CSS along with PHP or WordPress

I need to create a customized website for my project, which should include an admin dashboard for the site owner to modify specific visual components as needed. My main concern is whether I should rely solely on core PHP, HTML, and CSS for this task. Ca ...

phphtmlwordpressweb

Personalize the File upload with HTML and Javascript

https://jsfiddle.net/yugxqopz/ I'm new to the world of UI and have a simple request: 1) I want to upload a document using an "attach file" option 2) Once the file is selected, I want to automatically trigger a specific JavaScript function as shown ...

javascriptjqueryhtmlcss

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section. <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" /> In order to make the website mobile-friendly, I s ...

javascriptjqueryhtmlcss

I am interested in modifying the color of the tick marks on the input[range] element

Seeking Slider Customization Help I am eager to learn how to create and personalize a slider using HTML. Although many resources offer guidance on customizing the slider itself, I have yet to come across any information on customizing the scale. For insta ...

htmlcssinput

Is it possible to echo a CSS class using PHP?

I have a PHP structure and I would like to embed my div in PHP. I need to write CSS with echo class, but I am unsure of how to do it. Here is my div: <div class="mydiv"> <img src="catalog/view/theme/default/img/mypng.png" alt=""> </div ...

phpcss

Is there a way to adjust the container width to 1440px while also ensuring that the columns remain responsive with the help of Bootstrap 4 and SCSS?

Is there a way to customize the width of a container to 1440px while ensuring that the columns are still responsive? My project is built using Bootstrap 4 and SCSS. <div class="container"> <!-- Custom Container Width at 1440px--> ...

cssbootstrap-4sassresponsive-designgrid

What could be causing the CSS transition to fail when the menu button is clicked?

After clicking on the menu, a class 'active' is added to both the 'div' and 'section' elements. https://i.stack.imgur.com/jbamR.png The following javascript code accomplishes the above functionality: <script> const ...

javascripthtmlcsstransition

Compatibility Issue between Jquery UI CheckBox Button and Click Function in IE8

Situation: After calling addButton() function in jQuery, the checkbox element is successfully turning into a button. However, the click event that should trigger an alert message is not functioning. This issue seems to be specific to IE-8 compatibility. ...

javascriptjqueryhtmljquery-uiinternet-explorer-8

Even after setting the handler to return false, Angular continues to submit the form

In the following scenario, I have encountered an issue: Here is the HTML template snippet: <form [action]='endpoint' method="post" target="my_iframe" #confirmForm (ngSubmit)="submitConfirmation()"> <button type="submit" (click)="conf ...

javascripthtmlangular

Shade the entire td column in different colors depending on the characteristics of th

I am working with a table and here is the code for it: <table> <thead> <tr> <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th> <th style="font-weight: bold; wi ...

javascripthtmljquerycsslaravel

Executing unique calculations on Kendo UI Grid Columns

For experienced users, this may seem simple, but as a newcomer, I'm struggling with a basic arithmetic task. I want to multiply one of the column values (DealValue) by 0.05 in my Kendo grid setup. Despite looking through the Kendo docs, I couldn' ...

javascriptjqueryhtmlkendo-uikendo-grid

Is there a way to get Axios to display CSS on the page?

While working on a Web Viewer project with axios for web scraping practice, I encountered an issue where the CSS wasn't loading properly. Here is the code snippet I used: console.log("Tribble-Webviewer is starting!") const express = requir ...

javascriptcssexpressaxios

Customizing colors in React Material UI

Can colors in Material UI be overridden without the use of JS? Is it possible to override colors using CSS alone? ...

cssreactjsmaterial-ui

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Currently in the process of developing an application that utilizes Bootstrap Table and its extension, Filter Control. One feature I've incorporated is individual search fields for each column to enhance user experience. The challenge I'm facing ...

javascripthtmljquerybootstrap-4bootstrap-table

Is there a way to escape from an iFrame but only for specific domains?

if (top.location != self.location) { top.location = self.location.href; } If my website is being displayed in an iFrame, this code will break out of it. But I want this to happen only for specific domains. How can I perform that check? ...

javascripthtmliframe