Help! Image as a background with h1 and h2 elements

Help! Image as a background with h1 and h2 elements


Hello Folks!

I stuck on my 2nd project :frowning:

I want (inside the image) to move in the middle h1 and h2 and change font etc.
The problem is that when (in CSS) I write the kod:

h1 {
text-align: center;
color: pink;
It doesn’t work :frowning:

Can you help me, please?

2nd project


You have a couple of problems.

#1) Your current code in your code pen shows:

h1 {
  text-aligh: center;<!--this has a typo - it is text-align not text-aligh -->
  color: red;

not what you show in your post above. You need to change your Codepen first.

#2) The reason the font of the h1 element stays white is because you used an in-line style of:

<h1 style="color: white">Daria Wójcicka</h1>

In-line styles take priority over css selector definitions. You need to remove the in-line style of style=“color:white” before the h1 selector definition will apply.

Apply what you have learned from my post to the h2 element.

EDIT: Also, since you are using Codepen, you need to move all the stuff between (but not including) the <head> and </head> to Stuff for <head> section of the HTML Pen Settings (see screenshot below).


Thank you very much for your answer! Really appreciate!

I have done everything what you reccomend, both h1 and h2 are in the centre now, (color white is better that red, i guess). However…I have a new problem now :blush:

How I can move both texts in the middle of the image? I used margin but it looks horrible now…

Do you know what and from where is this big white strap? I can’t figure it out :blush:

And again,thank you for your help!

2nd project