Using CSS alone, incorporate two images within a section in HTML5

Is there a way to add two images inside a section using CSS to make them look like this:

However, the only result I can achieve with CSS looks like this:

I could use divs in HTML and add the image via HTML, but my class teacher mentioned that it would be semantically wrong in HTML5 as this is a "mood" picture - and all mood pictures should go into CSS. Any ideas?

#Principle1 {
    background-image: url(../pictures/puzzle1.png), url('../pictures/Paranormalwikipic.png');
    background-repeat: no-repeat, no-repeat;
    width: 583px;
    height: 500px;
}
            <section id="Principle1">
                <h2>
                    מסר מספר 1: תאמין בעצמך!
                </h2>
                <p>
                    שיעור מספר אחת נמצא כמעט בכל אנימה. כל אחד צריך להאמין בעצמו, ולא לתת לדעות אחרים להשפיע עליו. מי יודע, אולי תהיה גיבור העל הבא?
                </p>
            </section>
htmlcss

Answer №1

If you want to position and zoom multiple backgrounds in CSS, you can follow this syntax.

For example:

background: 
  url(first.png) 0 0 no-repeat,
  url(second.png) -576px 100% no-repeat, 
  url(third.png) -288px 0 repeat-y;
background-size: 50px 50px, 100px 100px;

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

Position a component in relation to another component using AngularJS

Utilizing ng-show and ng-hide, I created a descriptive box that appears below text when clicked. However, there is an issue as the description box does not align directly under the text, similar to what is shown in this image https://i.stack.imgur.com/phBh ...

javascripthtmlcssangularjs

Using the clip-path property to determine the content padding within a div

I am encountering an obstacle while attempting to insert icons into a polygon-shaped div. The problem lies with the padding, as the icons get cut off by the borders of the polygon. #container { width: 200px; height: 200px; border: 2px solid blac ...

htmlcss

Disable the functionality of the next and previous buttons for the Bootstrap carousel when clicking on the outer

Here is the code for the carousel: The next/prev button functions under its respective div, how can I stop it? When I click on the div below the carousel, the carousel continues to move as usual. Below the carousel div, there is another one with a tabbi ...

javascriptjqueryhtmlcsstwitter-bootstrap

Reveal and conceal grid elements upon clicking embedded links

I'm attempting to toggle the visibility of div content upon clicking a link. I've tried using a similar approach as shown in http://jsfiddle.net/fXE9p/, but unfortunately it didn't work for me. <body> Clicking on a button should m ...

jqueryhtmlcss

Creating a collapsing drop down menu with CSS

I utilized a code snippet that I found on the following website: Modifications were made to the code as shown below: <div class="col-md-12"> ... </div> However, after rearranging the form tag, the drop-down menu collapse ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

Ways to retrieve the data within the tinymce text editor for seamless submission through a form

I am a beginner with TinyMCE and I am working on integrating the editor into my Laravel project. So far, I have managed to get it up and running, but I am struggling with retrieving the content from the editor and passing it to the controller for database ...

phphtmlmysqllaraveltinymce

Is it possible to use D3 for DOM manipulation instead of jQuery?

After experimenting with d3 recently, I noticed some similarities with jquery. Is it feasible to substitute d3 for jquery in terms of general dom management? This isn't a comparison question per se, but I'd appreciate insights on when it might b ...

javascriptjqueryhtmld3.js

Troubleshooting: Difficulty with jQuery script to change images

I am trying to modify the src attribute of an img tag using the code below, but it doesn't seem to be working. Can anyone help me figure out what's wrong? <img id='logo_image'/> <span onclick='$(logo_image).attr("src", "i ...

javascriptjqueryhtml

URL relative references across multiple domains

Here's a quick question: When developing themes and coding, how do you navigate linking to different files in your html/css code? For example: At our company, we mostly use <base target="http://whatever"> in our main template and then simply r ...

htmlrelative-path

JavaScript Hangman Game Malfunctioning

I am in the process of creating a basic hangman game to be played on a web browser. Whenever the user clicks a button, it triggers a function called pickWord(): <button onclick="pickWord()" id="restart">Choose A Word</button> This functi ...

javascripthtml

eliminate element from array and refresh table

I am facing an issue with my code where I have an array bound to ng-repeat and a button. When the user clicks on the button, I want to remove an element from the array. Here is my current code snippet: var app=angular.module('app',[]); app.con ...

javascripthtmlarraysangularjsangularjs-directive

What is the process for choosing a particular input element based on its size and type?

Among my pair of sets containing input type=text elements, each group is uniquely styled through CSS. In the first set, the length adjusts based on CSS using the width property. Conversely, in the second set, the size attribute determines the length of the ...

htmlcss

Determining the number of columns and rows within an HTML table

Is there a way to determine the number of columns and rows in an HTML file? How can we accurately count the total number of td tags present within the HTML file? ...

c#.nethtmlwinformscount

Tips on eliminating borders in react-table components

Within my React.js component, I have implemented a table using react-table along with some material-ui components displayed alongside the table: import React from 'react' import { useTable, useGlobalFilter, usePagination } from 'react-table& ...

javascriptcssreactjsmaterial-ui

Switch background color multiple times on click using JavaScript loop

Hello amazing people! I have a container with 52 small boxes and one large box containing a letter. The smaller boxes are arranged around the larger one using CSS grid, and when hovered over, they turn light grey. My Objective When any of the 52 small b ...

javascriptjqueryhtmlcss

Locator for finding compound text within a div class using Selenium WebDriver

I am struggling to select a specific button in the UI that shares similarities with other elements. Below is the code snippet for the button in question: <div class="ui green ok inverted button"> <i class="checkmark icon"></i> Yes </d ...

htmlcssseleniumxpathwebdriver

What are the recommended margins for various alphabets?

When displaying text, some alphabets take up more space than others. So how can I adjust the white space between elements '#re1' and '#re2' automatically in the scenario described below? In this code snippet, what is the best way to ad ...

javascripthtmlcss

What causes an asynchronous function to exhibit different behavior when utilized in conjunction with addEventListener versus when manually invoked?

I was delving into the concepts of async and await keywords and decided to create a basic demonstration using an HTML file and a corresponding JS file. In my example, I defined two promises - promise1 and promise2. The handlePromises function uses async/ ...

javascripthtmlasynchronous

Issue with custom font display malfunction

I'm having difficulty getting my custom @font-face to function properly. When I apply this class style to a <p>, it always defaults to Arial. Can anyone point out what might be going wrong here? <style> .stonefont @font-face { font-fa ...

htmlcssfont-face