•  10-07-2023
  •  | 
  •  

Question

How can I put an image as a banner, at the same time one more images as background? I don't know how to put the multiple image in css. I've trying to insert it, but one of the image is missing when I browse it in the brwoser.

Was it helpful?

Solution 

<head>
            <style>
                        body {
                            background: url("img1.jpeg") ;
                        }
                        #banner {
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            right: 0px;
                            width: 100%;
                            height: 200px;
                            z-index: -1;
                        }
            </style>
</head>
<body>
             <img id="banner" src="img2.jpeg" alt="Banner Image"/>
</body>

OTHER TIPS

I think that @Tejas Patel has already answered your question. One thing which you mentioned in your question regarding "one or more images in the background", If I understand you correctly you want to use One background with multiple images on it.If it is so then you can achieve that using CSS Sprites. You can play with it here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top