Nested Nav Clips Header and Background-Size: Cover Not Working

[TOSONA]

I’m trying to place a background image in the header with the three line page navigation displayed inside the header (floating over the background image). However, the <nav> element clips the <header> graphic, even though the <header> is the parent element (I would have thought that if the background image is in the <HEADER>, it would belong to the <HEADER>, not the <NAV>. Also, even if I remove the <NAV> element altogether, the background-size: cover, still doesn’t show the entire image. At the risk of annoying everybody (and with humble apologies), in many, if not most, cases, clearly it would be intended that the background image be displayed fully (or nearly so), not clipped right up against the content. Why in the world would the specification have been written to accomplish the exact opposite of the desired result? It’s very frustrating that such an obvious and probably frequently desired effect should be so difficult to achieve. Didn’t they know that when they wrote the spec? I have to wonder how many useless hours web designers have spent trying to answer this question, when a logical specification could have prevented the undoubted thousands of redundant posts to forums like this. Very grateful to anyone for help.

I have tried entering pixel dimensions and 100% instead of “cover”, just as a test, but the results are the same. The image is clipped to the mainNav. Certainly, the spec should be that pixel dimensions will display as coded, if nothing else works.

header#pageHeader {
background: url(../_images/gorge_rob_homepage.png) no-repeat center center;
background-size: cover;
}

nav#mainNav {
/* NOT YET STYLED */

}

[Paulie_D]

We can’t tell much without seeing it in action.

A Codepen.io demo would be optimal.

[TOSONA]

Thanks very much. I understand entirely. As it happens, I probably need a CSS consultant (so far, having little luck finding anyone in the Washington DC area). I don’t know why a border around the section causes the section to be placed where it should be, but, when I move the border, the margin increases by about 1000 pixels. Except for the fact that the border is 1 pixel, why would a border cause anything to move? I thought the C in CSS stood for cascading. However, when I specify the font color for the page in the body tag, and later specify a different color for a specific (specificity, right?) id, ALL of the text changes color, except for the a:link and certain headers. I have taken hours of CSS training, read my books from Smashing Magazine, and built several web sites with CSS3. I’m not understanding AT ALL the weirdness of what’s going on. If I knew how to remove my post and stop bothering everybody, I would. Again, thanks and apologies.

[Shikkediel]

I’m quite sure these are all solvable problems but a live link would be the least to say anything sensible about it…

[Paulie_D]

What he said…

[TOSONA]

Thanks again, very, very much.

I have posted the draft site to:

http://www.trsgraphics.com/rjb/index.html

The problems I’m running into now are:

I had to insert a tag:

 

in the <header> to get the entire header background image to display without sliding several hundred pixels down the page (putting border around the image also fixed the top margin problem; I have no idea why). It’s kludgy, but it works. I wish I understood why.

The text under the “HIDE” graphic isn’t centered, although the text is set to text-align: center. This may have to do with the background image not responding to the max-width of 1024 pixels.

The background image for the footer seems to be correlating to the

for the footer, but the background image is assigned to the <footer> tag, not the

. The image is supposed to butt up against the bottom of the background image above (robin’s eggs), and the text should begin at about half way to two-thirds below the top of the image. That is, the behavior should be the same as the main nav in the header.

[TOSONA]

There is a jpg of what the page is supposed to look like at:

http://www.trsgraphics.com/rjb/Bonney-Web-2016-Mockup-1440.jpg

[Shikkediel]

Centering the text below “HIDE” is an easy one :

.hidecontainer {
width: 100%;
}

An absolute element will only be as wide as necessary, while other block level elements will default to 100%.

Likely the other issues are caused by margins. They tend to mess up layout more than they do good if overused. The border being a remedy is a clue in that direction.

Using negative top margin on the other elements could possibly fix it but I’d maybe have a second thought if they’re necessary elsewhere instead.

The initial issue would be easier to examine if there were a demo page without the adjustments to fix it.

[Shikkediel]

Something seems wrong with the CSS by the way. It’s showing a lot of repetitive style in developer tools.

[bearhead]

Yeah, this webpage could be written far simpler than it is… I think the base of your layout issue is that content is simply layed over background images and positioned via huge margins (in some cases as large as 640px o.O).

The html needs to be restructured such that each block of content is grouped with the image it is supposed to go with in it own container.

Like Shikkediel wrote, you also seem to have far more css than is necessary… media queries for responsiveness I’m guessing? The thing is, a webpage this simple could probable be responsive with very minimal (if any) media queries.

[TOSONA]

Many, many thanks for the help. The page now looks pretty much as it should thanks to the help from this forum. It’s very kind of everyone.

I agree that the page is a very simple one. I would have thought that the CSS could be simple, too. I guess I was wrong. Trying to trick CSS into behaving with background images has proven to be way more difficult than it should. (When a Google search of “css background image width 100” returns 1,370,000 results, that tells me it’s a screwy set of specifications. I’ve read the posts. I feel the pain.)

I don’t necessarily want lots of margins (or padding) in the CSS either, but I don’t know of a better way to position text over certain parts of the background images.

The text for the novel is now centered. Thanks!

Thanks for this reply: “The html needs to be restructured such that each block of content is grouped with the image it is supposed to go with in it own container.” I agree. As I look at the code, that seems to be pretty much what I did. Again, I’d be extremely grateful for any specifics on why that’s not the case, and how to remedy.

Long, long ago, I used to program in Pascal. CSS is not Pascal.

[Shikkediel]

In general CSS is quite straight forward but I’ve more often scratched my head because of it than with coding JavaScript. Some aspects of it (like margins and floats) can be quite obscure when it comes to the exact specification. I haven’t had that experience so much with background properties though so I’m kinda curious to see what you initially describe in this thread. If you feel like it, you could isolate that bit and post a demo from here :

https://codepen.io/pen/

Using padding instead of margin where possible is often a lot less troublesome by the way.

[Author]

Posts