Working with CSS and width

Question

My friends spa website I'm making for them is going good however I just have a quick question about CSS. If you resize the page you see the colour of the links change from the grey they are to blue, then red, then green. This is my testing method to know which Media Query I need to work with. I'd like to know why the logo isn't repeating along the top of the page?

I'm trying to have the image repeat and span the full width of the top of the the screen size but instead it's like the width is set to 100px?

Here is my code for the title-area for the media query with the red links:

#title-area {
    position: relative;
    width: 100%;
    height: 204px;
    top: 0px;
    background: url(images/melt-logo.jpg) top center repeat;
    text-indent: -99999px;

}

I've looked through firebug and can't seem to find the problem. Any help is appreciated!

DACrosby · Accepted Answer · 2013-07-15 06:33:32Z

1

Looks like your #title-area has a fixed width of 700px. Change this to 100% (approx line 210 in style.css).

The background on it is set to no-repeat. The example in your post is more correct - change this to simply repeat (approx line 214 in style.css).

#title-area also has left:-350px set so the logo appears in the left even though it's on the right of logo.jpg. Make the width something like 175% which will cover it up, otherwise the better idea would be to put the logo on the left of the image, set left to 0px and leave the width at 100%.

answered Jul 15, 2013 at 6:33

DACrosby

11.5k3 gold badges42 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

omma2289 · Accepted Answer · 2013-07-15 06:19:33Z

0

You need to reset the left value too:

#title-area {
    left: 0;
}

answered Jul 15, 2013 at 6:19

omma2289

54.7k8 gold badges66 silver badges68 bronze badges

Collectives™ on Stack Overflow

Working with CSS and width

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related