<img src="filename.jpg" etc/>

Question

I am confused by using the image tag in html as opposed to or instead of the css

like this

<div class ="myhook">

</div>

css :

.myhook {
 width: 100px;
 height: 100px;
  background: url(''filname.jpg')

}

Question 1 will this load a 100 by 100 square portion of the image or the whole image into the div but scaled to 100 by 100

also why would you do it like the above rather than this way below

<div class = "myhook">
  <img src="filename.jpg" />
</div>

css:

.myhook {
  width:100px;
  height:100px;
}

or we could just use <img src="filename.jpg" width="100px" height="100"/>

Aside from this I have seen

.myhook {
  width:100px;
  height:100px;
    background: #hexcolor url(''filname.jpg')g 
}

myhook::before 
     content: ""
    background: url('filname2.jpg')
}

what is this doing, as in the pseudo before I thought meant the image comes before the previous image but it seems to lay it over the top of the background..

I came across these ideas in using background position and image sprites.. All confusing to me anyway..

While we are on the subject what does this mean

background-position: 200% 100%

would background-position: 50% 50%

centre the centre of the image within it container

if so what is the 200%

Answer 1 · 2016-10-16T23:39:32Z

October 16, 2016 11:39pm

The main difference is background vs. foreground.

The CSS code places the image in the background. Other content in the same parent element will go over it. If you used an img tag instead, the image would be in the foreground, and other other content in the same parent element would be placed around it.

A setting of "background-position: 200% 100%" would cause the background image to be shifted horizontally twice the containing element's width, and vertically by the containing element's height.

And "background-position: 50% 50%" would place the corner of the background in the element's center. To actually center the image you would have to subtract the image's dimensions. But there's no need to do that since you can also specify "center" as the value for background-position.

I would encourage you to experiment with the various settings a bit using the workspace or some other REPL. Seeing the results of various value settings for yourself will be much more memorable than just reading descriptions.

Answer 2 · 2016-10-19T01:49:37Z

October 19, 2016 1:49am

Hi Laurence,

Regarding putting it in the html or css -

As a general rule, if the image is part of the content of the page then it should be in the html. If it's a non-essential stylistic part of the design then it can be a css background image.

Question 1 -

The entire image will be loaded and it will be displayed at native size unless you've specified a background-size value that would require it to be scaled.

If your image is larger than 100px square then you will only see a 100px square portion of the top left corner assuming other properties are at their defaults. The rest of the image is there but it is clipped. If your image was 50px square then you would see the entire image in the top left quadrant of the 100px div.

::before and ::after pseudo elements -

You can think of the ::before pseudo element as a virtual first child to the element it's applied to. I think that's how MDN describes it. This means that it comes before all other children of that element.

You can think of it like this:

<div>
  <before></before> <!-- Doesn't actually exist in the html -->
  <p>Some paragraph</p>
</div>

These are used to create extra elements to attach css to so that more complex designs can be achieved.

background position questions

For 50% 50%, you're correct. You can think of it as, 50% across and down the image is lined up with 50% across and down the element. This can be generalized to, "aligns the center point of the image with the center point of the element". This is the same as center center

For 200% 100%, the 100% means that 100% down the image is lined up with 100% down the element. This can be generalized to, "the bottom of the image will be aligned with the bottom of the element". For 200% it will be positioned such that 200% across the image will be lined up with 200% across the element.

No generalizations can be made about the 200% in terms of what you're going to see. It is dependent on the width of the image as well as the width of the element. You might see all of the image, none of the image, or a portion of the image.

Here's a link to the background-position property in the "Backgrounds and Borders module level 3" specification: https://www.w3.org/TR/css3-background/#background-position

Example 9 describes how to interpret percentage values if you need a little more explanation on that. I recommend taking a look at Figure 4 which visually shows you how to interpret percentage values. That's probably better than any words can achieve.

Welcome to the Treehouse Community

Looking to learn something new?

Laurence kite

Laurence kite

<img src="filename.jpg" etc/>

Jason Anello

Jason Anello

2 Answers

Steven Parker

Steven Parker

The main difference is background vs. foreground.

Jason Anello

Jason Anello

Regarding putting it in the html or css -

Question 1 -

::before and ::after pseudo elements -

background position questions