• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 400
  • Last Modified:

Width of header/footer repeated image when window is shrunk

Hey all,

I have this interesting scenario and i'm wondering if someone could assist me since it's been something that even stumped my buddy who works in web dev.

I don't like giving out links usually so i will explain this problem using images.

My concern is when I minimize the browser below the initial width of my container; upon scrolling to the right, i notice that the repeated bg image i'm using for the header and footer are eventually stuck once i've scrolled beyond the new browsers width.

My width is set to 100%, so my css is just doing what it's told, however i'm wondering if anyone has a solution to this problem that I've seemed to had time and time again on other sites.
1.jpg
2.jpg
3.jpg
0
Arka3L
Asked:
Arka3L
  • 3
  • 3
  • 2
  • +1
1 Solution
 
chapmanjwCommented:
Using CSS try setting the width of HTML, BODY, and the header container to 100%.

html
{
width: 100%;
}

body
{
width: 100%;
}

#header
{
width: 100%;
}
0
 
Arka3LAuthor Commented:
Those are my current attributes.
0
 
Chris StanyonCommented:
Without seeing the code and debugging using FireBug, it may be a little tricky to find your problem!

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
level9wizardCommented:
That is not normal browser behavior - my first thought is to ask if you have validated both your HTML and CSS using a valid DOCTYPE ? [see w3.org]

Second, this can sometimes appear if there is a containing div (often used for content) that either applies this repeating background, or has its own interfering with it.

For the repeating bg, where is it applied? The <body>, or in <html> or in another containing <div> ?
0
 
Arka3LAuthor Commented:
Yes, of course, i always validate my code.

The main gradient you see in the first picture is set in the body, however the header is completely separate from the container div.

My header div is by itself and spans a width of 100% with its own bg image. Below that the container begins, so they are two separate divs altogether and one is not contained in the other.

I've decided to upload my files and remove any particular wording. The footer is not included, but thats not important.
urology.zip
0
 
Chris StanyonCommented:
Try adding:

    min-width:900px;

to your CSS rule for #header, within style.css

#header {
	width: 100%;
	height: 132px;
	background: #fff url(../images/header_bg.gif) repeat-x top left;
	top: 0px;
	min-width:900px;
}

Open in new window

0
 
level9wizardCommented:
Arka3L>>The main gradient you see in the first picture is set in the body, however the header is completely separate from the container div.


I don't really see the need to have two separate background containers for that (one in header, one in body). Just take a single 1px-wide slice as high as needs be to grab both the header menu bit and the fading gradient and repeat it on body. Then, you can define an overlaying div for the header with Background: transparent. As for the following content boxes ( the ones with "serving your health" and "Welcome to Urology") just give them a margin:0 auto; to center, and apply the background color as needed.
0
 
Arka3LAuthor Commented:
Most of the time is the obvious solutions that work best!
0
 
level9wizardCommented:
Arka3L>>Most of the time is the obvious solutions that work best!

I would test that in several browsers (Opera,Chrome,IE,FF,etc) - I have had unexpected results with min-width and min-height unless using the min-height fast hack:
http://www.dustindiaz.com/min-height-fast-hack/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now