How to get rid of text background?

What I’m trying to do is have the title be ON the image itself and be there without the long container thing that separates the image and text. Is there another way to do this other than messing with the margins until I get the result that I want?

make the element background: transparent;

1 Like

That does help but the text itself isn’t on the image right now so there isn’t anything actually BEHIND the text. I need help actually getting the text positioned on the image.

You will need to share a link to your code for more detailed help.

Here you go!

If I’m understanding what you’re asking then , In the CSS for the H2, set the background opacity

The following are the cross browser snippets.


H2 {
/* IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;

Try this:

position: absolute;
color: white; /* Or the color of your choice */
left: 50%;
transform: translateX(-50%);

You’ll also probably want to set the position of the surrounding div to relative — that will allow you to set a top value for the h2 that’s relative to its container rather than relative to the whole page.

1 Like

Thank you this is exactly what I was looking for!

Strangely though the white box reappears if I change the position type. Any ideas?
*edit: Nevermind i fixed it by placing absolute text over a relative image.