I have a background-image on my h1 that really only needs to be around 400px wide, but I've increased it to 1500px because I couldn't work out a sensible way to have it stretch to the end of the page.

Obviously increasing the size of the image is a terrible solution, since it's now serving a much larger image and it still won't look right for users with a resolution above 1500px wide.

To stop it scrolling horizontally, I added:

body{
    overflow-x: hidden;
}

But this feels very messy too.

How can I see h1's background-image consume all the horizontal space available to it?

3 answers

13
points
This was chosen as the best answer

What I'd usually do in this situation is create a small background image that contains just your gradient (not the pattern on the left hand side). Make it 160px high, and just a few pixels wide.

Then, put that as the background image on the body tag, set to repeat. Your new CSS for the body would look something like:

body {
  margin: 0;
  font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif;
  font-size: 14px;
  color: #5F6989;
  background-color: #fff;
  background-image: url(/images/gradient.png);
  background-position: top left;
  background-repeat: repeat-x;
}

That'll make your header continue as wide as it needs to be, at any size of browser window.

Keep your existing header image on the H1 tag as you have done, but change it to be only as wide as it needs to be.

h1 {
  background: url("coming-soon-header.png") no-repeat;
  text-indent: -1000px;
  width: 550px;
  height: 200px;
  margin: auto 0;
  padding: 0;
}

This way, your pattern in the header, and the text, will remain where they are, but the body background will fill in the rest of the horizontal space.

Answered almost 8 years ago by Paul Farnell
6
points

Great answer Paul. Although you could write the background css in one line, like this:

body {
  background:#fff url('/images/gradient.png') top left repeat-x;
}

Addition:

This achieves the same result in one single line. The same can be done for a couple of more elements in css, e.g.

element {
  padding:5px 10px 15px 10px; /* Order always is = Top, right, bottom, left */
  font: bold italic 14pt Arial, sans-serif;
}

When you get used to these one-liners as I like to call them it can really clean up your code.

Answered almost 8 years ago by Jesse Vlasveld
Jakob 17
-2
points

Well to see how much space/ how big an element is @ the page h1 element will always take 100% width based on the wrapping element which will mean as long you don't use a wrapping element it will always resize with the page.

<div id="wrapper" style="width=955px"><h1>Your headline</h1></div>

so the h1 element will have length of 955px you could change this with positioning or width -> width will resize it no matter if relative or absolute position. Position -> absolute will take it in the relation to the body element in DOM and will always stretch to the max width unless you give a fixed width.

to check it FireFox -> add ons -> Web Developer or Firebug IE -> IE developer Bar Safari -> Web Inspector

Since my most of the users in the whole world just (sadly) use IE the IE developer Bar is a pretty helpful tool but useless for JS debugging and but for DOM inspection pretty good.

Answered almost 8 years ago by Jakob