Enhancing Your Website with Multiple Background Images in CSS3

Having trouble understanding how to position multiple background images with CSS3. I'm struggling to get them to display at the top, middle, and bottom of the page. Can you help me figure out how to make an image appear at different positions using a 100px x 100px block for illustration?

CSS

body {
background-image: 
url(../images/red.png), 
url(../images/blue.png), 
url(../images/yellow.png);
background-position: left top, center top, right top;
background-repeat: no-repeat;
}

I would like the images to be positioned at left top, left center, and then left bottom.

Any assistance is greatly appreciated.

htmlcss

Answer №1

Merging tags is essential.

body {
    background-image: 
        url(../images/red.png) left top no-repeat, 
        url(../images/blue.png) center top no-repeat,, 
        url(../images/yellow.png) right top no-repeat, 
}

Edit:

<style type="text/css"> 

    background-image: 
    url(../images/red.png),  
    url(../images/yellow.png);
    background-position: left top, left bottom;
    background-repeat: no-repeat;

    #centerIMG {
        margin-top:-50px;
        height: 100px;
        width:  100px;
        background:url(../images/blue.png) center left no-repeat;
    }
    #outer {height: 100%; overflow: hidden; position: relative;}
    #outer[id] {display: table; position: static;}

    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

    #inner {position: relative; top: -50%} /* for explorer only */
</style>
    <div id="outer">
        <div id="middle">
            <div id="inner">
                <div id="centerIMG"></div>
            </div>
        </div>
    </div>



Edit: 

<style type="text/css"> 
    body
    {
        background:
            url("red.png") top repeat-x,
            url("blue.png") bottom repeat-x,
            url("orange.png") center repeat;

            background-size: 200px, 100px;
    }
</style>

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

How to add a checkbox to an HTML form with QT

I am looking to add a checkbox in an HTML code using QT. I have successfully created an HTML using QTextEdit and QTextCursor, but I am unsure of how to insert a checkbox. If anyone has experience with solving this issue, please provide me with some guidan ...

htmlqtcheckbox

Excessive text in HTML div element

Whenever I maximize the window in any browser, I type a long string in a div or span tag. It perfectly fits within the div tag. However, when I minimize or compress the browser width, the text spills out of the div area. I am looking for a solution to set ...

csshtml

modify pseudo element's style in Angular based on a particular condition

I am trying to change the style of :before based on a condition. I attempted to implement the solution provided at , but it did not work as expected. Here is my code: .sender:before { content: ""; width: 0px; ...

htmlangularsass

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

I have a scrollable container for displaying messages. I would like to apply an opacity of 0.5 to the content in the top 30% of the container, as shown in this image: https://i.stack.imgur.com/NHlBN.png. However, when I tried using a background div with a ...

javascripthtmlcssreactjs

Learn the process of incorporating animations into text with Material UI

I'm looking to incorporate a 3D animation effect with a 360-degree rotation on some text using Material UI. <Typography variant="overline" color="secondary" style={{fontFamily:'Roboto'}}> All about your needs </Typography> Ho ...

cssmaterial-ui

problem with the picture and wrapper expanding to fill the entire width of the screen

I'm having an issue with the image I added and its hover effect. The image seems to be leaving space on both sides of the screen, even though I've included background-size: cover and width:100% in my code. Could someone please point out where I ...

htmlcssuser-interfacebootstrap-4background-image

Problem regarding the widths of HTML <table> elements

I am working with a <table> that has 3 columns structured as follows: table { border: 1px dashed goldenrod; } td { border: 1px solid gray; } <table> <tr> <td width="120">Some content</td> <td width="150"> ...

htmlcsshtml-table

Having trouble applying CSS while printing using the ngx-print library in Angular 14. Can anyone help me out with this issue

The table shown in the image is experiencing issues with applying CSS properties when printing. While the background graphics feature has been enabled, the preview section still does not reflect the CSS styling. What could be causing this discrepancy? Cli ...

htmlcssangular

Retrieve all HTML elements, including their closing tags, from a file with Java, without relying on external libraries such as Jsoup

Recently, I've been working on a piece of code that reads an HTML file, extracts all the opening HTML tags, and displays them. However, I have been thinking about how to also include the closing tags in the output. At the moment, the code prints: < ...

javahtmlregexfile-io

The CSS styles are not being rendered on the page

My simple static html/css project seems to be having trouble applying styles to the html elements in stackblitz. You can view the project here. I'm wondering if there might be an issue with linking the css file using the link tag, or perhaps it's ...

htmlcssstackblitz

Can a submit button be created that integrates both a radio button and submission functionality?

Is there a way to combine a radio button and submit button into one element for submitting the value just with a click? Currently, I have a radio button and a separate submit button in my code, but I want to streamline it. This is the current code snippet ...

htmlcssforms

Unable to align a 1px element with the primary border

Can you please assist me? I would like to modify the CSS markup below in order to remove the 1 pixel added extra on the active clicked tab from my UL LI Tabbed Menu. How can this be achieved? Here is a picture of the issue: HTML Markup: <div class=" ...

htmlcss

Troubleshooting: Bootstrap 5.0 Navbar Dropdown Issue Unresolved

My navbar dropdown isn't working when clicked. I've searched for solutions without success. Is there a script missing? layout.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> ...

htmldjangobootstrap-5

Obtain the accurate sequence of tr elements in the form of a jQuery object

Even though you can define tfoot before tbody in the source code, when displayed in the browser tfoot will still appear last: <table> <thead><tr><th>i get displayed first</th></tr></thead> <tfoot><t ...

javascriptjqueryhtml

How can I perform a MySQL UPDATE using 2 parameters received from an AJAX request ($_POST)?

I am currently working on an AJAX call that updates a row in the database based on the ID (pid=38) and changes the value of a column to NULL depending on the button clicked (taskimg0). I have managed to make it work by hardcoding the value $_POST['dtf ...

phpjqueryhtmlmysqlajax

Dynamic presentation created with Serif software

As a newcomer to web coding and one of the older generation, I recently created a basic .swf slideshow using Serif's graphic software. However, I realized that it does not display on an Apple iPad. You can experience this issue quickly here. My questi ...

javascripthtmlflash

Smooth scrolling in JavaScript can lead to unexpected jumps when using scroll-margin-top

I am currently working on implementing smooth scrolling into my website using JavaScript. However, I have run into a problem with CSS property scroll-margin-top causing a sudden jump at the end. The CSS I am using for scroll margins looks like this: class ...

javascriptcsssmooth-scrolling

jQuery code runs smoothly on Firefox but encounters issues on Chrome

I'm experiencing an issue with a script that is supposed to post a comment and load the answer from a server. The script works fine in Firefox, but in Chrome, it seems that no event is triggered. You can click the button, but nothing happens. I'v ...

javascriptjqueryhtmlgoogle-chrome

Retrieve the chosen item to automatically fill in the input fields using Ionic 2 and Angular

My goal is to create a dropdown menu populated with a list of items, and when a product is selected, its price should automatically appear in the quantity field. <ion-item> <ion-label>Item</ion-label> <ion-select (ionChange)="getP ...

javascripthtmlangulartypescript

Modifying the state object in ReactJS: A step-by-step guide on updating values

Below my query and explanation, you will find all the code. I am currently attempting to update the state in a grandparent class. This is necessary due to file-related reasons, and I am using Material-UI for text boxes. Additionally, I am implementing Red ...

javascripthtmlreactjsmaterial-ui