CODEWITHSUNDEEP
htmlcss
Clique Diamond
Clique Diamond

Reputation: 23

CSS Image Placement on Each Side

I am trying to place the same background image on each side of the header. So one centered on the left and one centered on the right. How do I do this ?

h1{
background-color: navy;
color: #ffffff;
text-align: center;
background-image: url("isologo.png");
background-position: center right; 
background-repeat: no-repeat;
padding: 70px;
font-size: 50px;

}

Upvotes: 2

Views: 40

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

If I understand you correctly, then to solve this problem you need to use the pseudo-classes :before and :after. Was it necessary?

h1 {
  background-color: navy;
  color: #ffffff;
  text-align: center;
  padding: 70px;
  font-size: 50px;
}

h1:after {
  content: '';
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQZU3qKXGbm1ZaRb0t8e2mrAONt-PwUZf190w&usqp=CAU");
  background-repeat: no-repeat;
  background-position: center;
  padding: inherit;
}

h1:before {
  content: '';
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQZU3qKXGbm1ZaRb0t8e2mrAONt-PwUZf190w&usqp=CAU");
  background-repeat: no-repeat;
  background-position: center;
  padding: inherit;
}
<h1>hello</h1>

Upvotes: 2

Related Questions