Photoshop Question posted in
The official user guide can be found here.

CSS for tight (transparent) box around text – Photoshop

I am trying to replicate this photoshopped header using CSS:

Photoshopped header example

I am doing this by creating a CSS class whose background is the header image:

.header-text {
  background-image: url(/images/group.jpg);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  background-size: auto;
  width: 900px;
  height: 250px;
  /*margin: 0px 0 0 0px;*/
  padding: 0 0 0 0;
  position: relative;
  float: left;
}

And then putting an h1 containing the text within the div of that class. Here’s the CSS for the h1 (sorry, it’s excessively verbose since I’ve been trying to debug):

.header-text h1{
  background: 
    linear-gradient(
      rgba(33, 33, 33, 0.7),
      rgba(33, 33, 33, 0.7)
    );
  position: absolute;
  font-weight: normal;
  bottom: 0px;
  left: 0px;
  font-family: 'Roboto', Calibri, Helvetica, Arial, sans-serif;
  font-size: 75px;
  color: #f2f2f2;
  width: 900px;
  height: 82px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

And the HTML for the header:

<div id="header_wrap" class="inner">
  <div class="header-text">
    <h1>CS Women UMass Amherst</h1>
  </div>
  ...
</div>

However, no matter how hard I try I can’t seem to get the text background flesh with the text as in the Photoshopped image. As far as I can tell I’ve removed all padding so I do not know where this extra background is coming from. The closest I’ve been able to get is the following:

enter image description here

Apologies in advance: I am not a front-end person!

Tags:

3

Answers


  1. 0

    Since the h1 is inside of the <div class="header-text"> I would have written the CSS as this:

    .header-text > h1 {
   ... all the css ..
}

    instead of this (what you’re doing):

    .header-text h1 {
   ... all the css ..
}

    I don’t know if this is your problem, but it’s a good tip anyway. It would be nice if you had a code snippet possible to run, so that your problem becomes clear.

    Login or Signup to reply.
  2. 0

    A negative line-height should help get the effect I think you’re looking for. Here’s an example.

    Login or Signup to reply.
  3. 0

    Adjusting height and line-height will tighten the gradient background around H1. Below is what I tested and found to look most like your Photoshop example. 

    .header-text h1{
background: 
linear-gradient(
  rgba(33, 33, 33, 0.7),
  rgba(33, 33, 33, 0.7)
);
position: absolute;
font-weight: normal;
bottom: 0px;
left: 0px;
font-family: 'Roboto', Calibri, Helvetica, Arial, sans-serif;
font-size: 75px;
color: #f2f2f2;
width: 900px;
height: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height:48px; 
}

    Screenshot of tested CSS

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search