Using CSS3 to layer two background images on the body element

Looking to create a unique design, I decided to use two images as a fixed background in CSS. Here is the code snippet I used:

background: url(images/31.jpg) 100% no-repeat, url(images/12.jpg) 100% no-repeat;
background-position: fixed;

My goal is to make these images fill the browser width completely and have the second image stack vertically after the first one. Despite researching multiple tutorials on using CSS3 for such designs, I encounter an issue - my images seem to be stacking on top of each other instead of aligning properly with the top left corner as Image 1 should. Is there any way to achieve this effect without relying on JavaScript?

css

Answer №1

Check out this example of CSS code:

#customBox {
  background-image: url(image3.png),url(image4.png);
  background-position: center top, right bottom;
  background-repeat: repeat-x;
 }

Answer №2

To prevent each image from taking up the entire height, you should adjust the vertical size to around 50%.

body {
    background-image: url(http://placekitten.com/300/150), url(http://placekitten.com/200/120);
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: top center, bottom center;
}

Check out this fiddle for a demo

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

Encountering difficulties including Bootstrap in React-app after attempting global installation

After using the command npm i -g bootstrap to install bootstrap, I attempted to include it in a React-app by adding import "bootstrap/dist/css/bootstrap.css";. Unfortunately, this resulted in an error being thrown. Failed to compile. ./src/index.js Modu ...

cssreactjstwitter-bootstrapnpmnpm-install

Transitioning from clip to clip-path in order to utilize percentage values

My current approach involves using a scss-based animation to create border animations with movement. The animation's core functionality relies on the use of clip. $box-width: 80px; $box-height: 50px; @keyframes clipMe { 0%, 100% { ...

csssasscss-animationsclip-path

Styling for the DataTable disappears upon loading jQuery

my PHP file named "zero3data.php" <?php printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">'); printf('<thead>'); printf('<tr>'); ...

javascriptcss

Glowing CSS animation surrounding a PNG image

.zuphologo { padding-top: 33%; padding-bottom: 2%; } .fx { box-shadow: 0px 0px 100px 4px #fff; animation: glow 1.5s linear infinite alternate; } @keyframes glow{ to { box-shadow: 0px 0px 30px 20px #fff; } } <div class="container"> ...

htmlcssanimation

Tips for vertically aligning values in a Bootstrap table

Currently, I am working on generating reports for an NGO that conducts surveys in schools. Once the reports are created, they need to be sent out in a specific format. While a simple table structure would suffice, I have decided to use Bootstrap classes to ...

htmlcsstwitter-bootstraphtml-table

Tips for eliminating the pesky "ghost" line that appears in your coded HTML email

Check out this Sample Code: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <title></title> & ...

htmlcssemailhtml-tablehtml-email

Integrating CSS into dynamically generated table rows using jQuery

Having trouble applying CSS to table rows created via ajax request. Despite using jQuery to add CSS to newly generated rows, it only affects the existing table headers. The table already has a 'sortable' class which also doesn't apply to dy ...

jquerycssajax

Position the div to the right of a left navigation bar instead of beneath it using Bootstrap 5

After using the code snippet from , I'm struggling to align content to the right of the navigation bar. It seems like a simple issue related to changes in Bootstrap 5 that I can't seem to figure out. <div class="d-flex flex-column vh-100 ...

htmlcssbootstrap-5

live preview of row data in a thumbnail

I'm curious about creating dynamic thumbnails of logos from table rows, similar to the image below: https://i.sstatic.net/FooEz.png Here is the code I've been using: .numberCircle { border-radius: 50%; width: 30px; height: 30px; padd ...

phphtmlcsstwitter-bootstrapbootstrap-4

Tips for effectively personalizing the dropdown menu made with ul-li elements

https://i.sstatic.net/7kkqL.png https://i.sstatic.net/dCwkI.png After creating a drop-down menu using ul and li tags, I realized that when the menu is opened, it shifts the blocks below on the screen. To prevent this from happening, I adjusted my CSS as ...

htmlcssfrontendscss-mixins

Difficulty with Line Breaks in Spans

I've noticed that my multi-line address in the footer is not breaking correctly at certain screen widths. Each line of the address is enclosed within a <span> tag with a specific class and then styled either as block or inline-block in the CSS ...

htmlcss

Using CSS and jQuery to Enhance Page Transitions

Seeking assistance with creating a unique page transition similar to this one: Basing the animation on my own design concept found here: Current experiment can be viewed at: https://jsfiddle.net/f7xpe0fo/1/ The animation does not align with my design vi ...

jqueryhtmlcss

Should elements be concealed with CSS if they cannot be eliminated with php?

There are times when I struggle to deactivate a function or elements in PHP, particularly in PHP frameworks and CMSs. As a workaround, I often utilize display: none. However, I am concerned about potential issues this may cause in the future. Should I co ...

phpcss

Updating the background SVG display in JavaScript/React according to the current state value

I am currently immersed in a project for my Bootcamp that involves creating a functional product with an aesthetically pleasing front end. I have chosen to utilize a .SVG as the background, set via CSS, and have successfully managed to alter the displayed ...

cssreactjssvgbackground-image

How can we integrate this icon/font plugin in CSS/JavaScript?

Check out the live demonstration on Jsfiddle http://jsfiddle.net/hc046u9u/ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materializ ...

javascriptjqueryhtmlcssfonts

.toggleClass malfunctioning inexplicably

I've been struggling to make a div box expand when clicked and revert to its original size when clicked again. It seems like a simple task, but no matter what I try, I can't seem to get it right. I'm not sure where I'm going wrong, as t ...

javascriptjqueryhtmlcsshover

Unable to modify the border color of the outline in MUI text fields

I am currently working on a React project using MUI and styled-components, but I am facing an issue with changing the outline border color of a textfield. Despite reading the documentation and attempting to overwrite the class names of the component, it do ...

cssreactjsmaterial-ui

Displaying different content inside a div based on the selection made in a dropdown menu

I'm experiencing difficulties with a jQuery script that should display the content of a div based on selected options in a drop-down menu. The drop-down menu is supposed to provide numerical values for a calculator to determine a loan amount. However ...

javascriptjqueryhtmlcss

Is there a way to use HTML, JavaScript, and CSS to manipulate an object's opacity when a button is clicked?

I am looking to add a button on my website landing page that can hide the weather section, but I am unsure how to go about it! https://i.sstatic.net/COA82.jpg Currently, I am using a "selector" where I can choose either 0 or 1 from the bottom right corner ...

javascripthtmlcssbuttonopacity

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

Here is the code I used to connect my two stylesheets, with the custom css file being linked second as per what I believe is the correct way to do it. <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href=" ...

htmlcssflaskbootstrap-4styling