Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Mani Saini
Mani Saini
3,101 Points
Posted by Mani Saini
Mani Saini
3,101 Points

Adding images on both sides of the header

HTML code : <header>

 <h1 class = "main-heading">GURUDWARA SRI DASHMESH DARBAR</h1>

CSS code:

h1 { font-size : 3.2em; color:white; line-height: 1.6; font-weight: normal; }

.main-heading { padding-top :120px; height : 100px; background : #6ab47b; text-align: center; margin:0px; }

I want to add two small images on both sides of my header? However i do add them they are appearing underneath my header but not inside the header area?

Can someone please advise me?

1 Answer

Tom Hsu
Tom Hsu
5,292 Points
Tom Hsu
Tom Hsu
5,292 Points

Try using pseudo-elements as a solution:

.main-heading::before {
   content: url(image.jpeg);
}

.main-heading::after {
   content: url(image.jpeg);
}