Help with Positioning

[majesticchirag]

As you can see in my pen in described an element div(with id “title_back”)which is little transparent… I want to set height of that element in % but unable to do so … so I need help with that…

Secondly, another div element(with id “title”), when I set its width to 100% it doesn’t follow the right margins just like the div with id=title_back did…
So I need help in this also…

Also, I want help on how to center align image inside that div element…(i suggest u to view my pen on full window…)(link:codepen.io/majesticchirag/pen/NxZyrr)

http://codepen.io/majesticchirag/pen/NxZyrr

[Paulie_D]

Do you have an image of how this is supposed to look?

[Paulie_D]

Let’s start at the beginning..

I want to set height of that element in % but unable to do so

% of what?

Percentage heights require that the heights of ALL ancestor elements be known or resolvable. That mean that all the way up the chain the height of each an every ancestor be either stated explicitly or can be calculated from a specific starting point.

The ultimate anscestor is the html element and it’s immediate child, the body…so if you want an element to be 50% of the page you need to set that first….usually at the same time.

html, body {
height: 100%;
}

Then I saw that you were trying to center the body…I’m not a fan of that.

In my opinion, it’s better to create a container with the set width (76% in your case) and center that with margin:auto. You can give that 100% height at the same time.

http://codepen.io/Paulie-D/pen/EPBLyN

[majesticchirag]

Thanks! I understood that % thing :) Also i understand margins:auto… Thanks these are very useful…

The other things that I wanted to say were that if I make a container named div (and set its opacity to 50%) and put some stuff inside say an image, that image will also have opacity 50% and I won’t be able to make it opaque…

So for getting an image inside that div container ( whose opacity I made 50%[comatiner’s]), I thought to put that image tag outside that transparent container div and then through CSS I put it on the container…

I have included the pen to tell you what I want…(plz view in fullscreen for better view)

http://codepen.io/majesticchirag/pen/NxZyrr

[Paulie_D]

Setting opacity on an element affects the opacity of everything inside that element.

If you want a a semi-transparent backgrouund use a background property color that supports alpha (transparency) values.

These are usually rgba or hsla (the ‘a’ stands for alpha).

#title_back {
  background-color: rgba(0,0,0,0.5);
}

Then you can just add your image…and since images are inline you can center then by adding text-align:center.

http://codepen.io/Paulie-D/pen/mVZLQv

Hoever, I’m getting the feeling that this is not what you are really after but rather you are trying to put text on top of the image.

We really need to see what your desired result would look like.

[majesticchirag]

Thanks u gave me the solution of my question… And this is what I really wanted only thing is I was doing it in a very complicated manner…

Your method is easy to understand and very effective.. Thank you so much!

And if i have any further problem i would ask you.. Thanks again…

[Author]

Posts