How much of this code can be put into CSS and how would I do it?

HTML & CSS
61

Which am I using, how am I setting it up?

<div class="overlay">

<img class="overlay"> or <div class="overlay">

or am I not using a class?

62

Do you mean that the blue image is a placeholder and you intend to use a different image once your code is working as you want?

63

Exactly, yes.

64

In my example you donā€™t need an overlay because its all set up properly and you can add the background image to the element called (perversely) .image.

Your current example collapses if you remove the actual image because you have not sized the div to match the parent which is controlling the overall size. In your example you would need a height to the div that was holding the image before any background would show.

Refer to my example (copy, paste and run).

3 Likes
65

You know how it gets smaller, can I have it going in this direction instead?

How the video collapses?

Updated code

66

You want the vid to stay in the middle of the viewport at narrow widths?

If so, that is what my code in post #43 does.

67

Its centred in the viewport so will always remain in the middle horizontally and vertically.

If you donā€™t want it centred remove the margin:autos from the wrapper and add vertical-align:top to the table cell instead of middle.

1 Like
68

How come after I click on it thereā€™s no picture?

I donā€™t know what I touched?

69

You told me to remove this line of code:

<img src="https://i.imgur.com/bQGFmLZ.png" ></div>

I did that and now after I click on it no picture shows.

How do I fix it?

70

Why did you remove the closing div? Thatā€™s got nothing to do with the image.

2 Likes
71

That fixed it, thanks.

1 Like
72

I have an issue, the background image doesnā€™t flow as it gets smaller. How do I fix it?

I want the background image to get smaller as the whole thing gets smaller. I donā€™t want it to stay the same size.

Hope thereā€™s a fix I can implement for this.

73

When I copy the code from @PaulOBā€™s post #59 and run that page in my browser, it resizes perfectly. If I replace the blue with a background image, as he suggested, it still works perfectly.

So I suggest you carefully compare your code to Paulā€™s and see where youā€™ve gone wrong.

1 Like
74

Code

How it looks:

How it should look:

75

This.

    .image {
      background: url('https://i.imgur.com/TkyTjYF.jpg');
      background-size: cover;
}
2 Likes
76

Thatā€™s it! Thanks a lot.

77

If you took time to read other replies properly, youā€™d have seen that in both Paulā€™s original post and my own post above.

1 Like
78

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.