How to apply image on top of background-image? - html

Question

Some pages contain page-header element/class.
.page-header class look like this:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
}
For Example:
index.html
<div class="page-header">
<h1>Homepage</h1>
</div>
about.html
<div class="page-header">
<h1>About</h1>
</div>
I want to add small image on top of the page-header using css, each page will have different image. How to do this and should I use span with css ?

Answer 1

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds

Answer 2

Yes you can add a SPAN and give the image,
NOTE: if you give any image to the header as a background, it will not useful to SEO, I suggest same image keep in IMG tag and out of the screen to get some SEO help too.
Ex:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
position:relative;
}
.out-of-screen {
position:absolute;
top:-2000em;
}
<div class="page-header">
<h1>Homepage</h1>
<img src="/public/images/page-header.png" alt="alt text" class="out-of-screen">
</div>

Answer 3

If your looking for a secondary background image to be overlaid on the previous background image. Then try this. I haven't tried it myself but it may be the answer.
.page-header:after{
background-image:url('/public/images/page-header2.png' no repeat;
}
You may need to position the :after to where you want it on the page but it maybe easier to stick with the simple image tag as Sameera has suggested if you want the image to be in a certain location within the element.
position:fixed;
left:0;
top:30%;
width:200px;
height:auto

Answer 4

<div class="page-header">
<h1>Homepage</h1>
<img src="path/to/image.jpg" alt="" style="position:absolute; left:50px; top: 50px;" />
</div>

Answer 5

there is a css property calles z-index.
The higher the value the most 'front' it will be.
The lower the more Back t will be
Négative value are okay.
.front{
z-index: 999;
}
.back{
z-index: 0;
}
NOTE: different-browser seems to have different behaviour.
To answer your question, Give a z-index lower to your header and add an elemt (span would be good) with an higher z-index

Answer 6

Use Multiple Backgrounds with CSS3.
Add padding-top to .page-header position page-header.png to bottom and
place second background at top.
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
http://www.css3.info/preview/multiple-backgrounds/

Answer 7

CSS allows us to add multiple backgrounds images just by adding a comma (,) between them.
HTML
<div class="bg-image">
CSS
.bg-image{
outline: 2px solid black;
padding:20em;
background-image:
url(https://images.unsplash.com/photo-1634148739677-a5bb54df2611?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80),
url(add another ".svg img" or any type of image);
background-repeat: no-repeat, repeat;
background-position:right 20% center 0px, top left;
background-size:auto, 10px;}