CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Position logo top right of div

Why is my logo not appearing top right of my div?

.service-title {
  width: 100%;
  font-size: 24px;
  line-height: 1.1em;
  padding: 1em;
  background-position: right top;
  background: orange;
  background-image: url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
  background-repeat: no-repeat;
}
<h1 class="service-title"><a href="/">test</a></h1>

Upvotes: 1

Views: 142

Answers (3)

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

Use this :

.service-title {
    width: 100%;
    font-size: 24px;
    line-height: 1.1em;
    padding: 1em; 
    background:orange;
    background-image:url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
    background-repeat:no-repeat;
    background-position: right top;
}

demo

Upvotes: 0

web-tiki
web-tiki

Reputation: 103780

It is happening because you are overriding the background-position property with the background shorthand.

Explanation :

The background specifies :

the concatenation of the initial values of its longhand properties:
background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
background-clip: border-box
background-color: transparent

(source : mdn background)

So when you set background: orange (after background-position in your CSS) it implicitly gives background-position: 0% 0%; so it overrides your background-position statement.

Solution :

You either need to put the background-position property after the background shorthand so it isn't overridden :

.service-title {
    font-size: 24px;
    line-height: 1.1em;
    padding: 1em;
    background:orange;
    background-position: right top;
    background-image:url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
    background-repeat:no-repeat;
}
<h1 class="service-title bg-orange icon-logo-clipped"><a href="/">test</a></h1>

Or specify background-color instead of the background shorthand so the background-position isn't overridden.

.service-title {
    font-size: 24px;
    line-height: 1.1em;
    padding: 1em;
    background-position: right top;
    background-color:orange;
    background-image:url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
    background-repeat:no-repeat;
}
<h1 class="service-title bg-orange icon-logo-clipped"><a href="/">test</a></h1>

Upvotes: 4

Bill
Bill

Reputation: 3517

Your background: orange; line over rides the background-position. This is because background is the shorthand property that defines all the other background properties, such as size, color, image and, of course, position. Here is the MDN - shorthand background property article.

Change background to background-color or just put it before background-position

.service-title {
  width: 100%;
  font-size: 24px;
  line-height: 1.1em;
  padding: 1em;
  background-position: right top;
  background-color: orange;
  background-image: url('http://vectorlogo.biz/wp-content/uploads/2013/01/GOOGLE-VECTORLOGO-BIZ-128x128.png');
  background-repeat: no-repeat;
}
<h1 class="service-title"><a href="/">test</a></h1>

Upvotes: 1

Related Questions