Public Forums 71,145 posts

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#194824

I’m having an issue trying to get my header to look my design. Maybe this is an easy thing to do but I can’t get it to work right. This isn’t REALLY even T3 specific, but I hope to get some help here anyway.

I have a site background that is a line-based design and a black background color. The header of the site is transparent white (about 90% opaque) to show part of the site background through.

Because of the way I did the layers on my design, the line-based background has a white background behind it. The result Is that the additional block that sits over the top of it that is the above-described transparent white, has a white background, so it’s a milky colored result rather than when you put transparent white over black, which makes it grey.

To further complicate it, on my design, the Lines fall between the white and the transparent-white layers for the container part of the site, but with the actual Joomla site, there’s not a way to do this AND have the lines continue to the page background as well. So I have to lose the full-white background, which works “ok” but doesn’t really look quite like the original design – it’s a little dirty looking and the colors of the bright orange lines don’t really come through well.

So (I’ll try to get to the point) – I thought I’d use a background behind the header container that aligns with the lines in the background – and it works, as long as I don’t resize the browser. When I resize (like responsive mode), the background-image in the header container resizes to be smaller but the site background doesn’t, which causes them not to align and it looks a mess.

I’m looking for a way for the header background to stay aligned with the page background even when resized.

I know this is a bit murky by description, but I don’t know how else to describe it. I have the development site going at http://cs.technicalrs.net if you want to see what I have settled on for the header area. Imagine that the lines that you can see through the transparency in the header were just a little more colorful and the white were a bit more white. That’s what I’m trying to accomplish. I know it sounds super picky, but my client is an interior designer/stager, so this will matter to her.

Thanks for any thoughts!

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#522842

Hi Scott

That’s pretty confusing for non native english speakers. How about a mock-up piccie?

You want the lines to show between the header and the main content?

Close? 😉

---

Attachments:

1. 

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#522847

Thanks for taking a look Swissa – I’m sure it’s hard to understand even for a native speaker!

A picture is worth a thousand words, so here’s the link to the original mockup:
http://www.technicalrs.com/Classic/V3.1

Here you can see that the header is whiter and the lines’ color is more saturated, where in my Joomla dev version the white is more grey (because it’s over the black background directly) and the orange lines are almost completely desaturated under the white header area.

In the mockup (used Xara Designer Pro for this), the layers within the .container area are like this:

transparent white
orange lines
solid white
black background

In the Joomla development version, the layers are like this:

transparent white
orange lines on black background

as you can see, there is an extra layer there. I can’t do this with Joomla (or html/css for that matter) because the orange lines are actually BETWEEN the two white layers but also are the page background. Make any more sense?

I realize the difference is sort of subtle, but I’d like to be able to create the site to look like the design.

Thanks for any input with ideas how to get this to work including responsive mode.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#522862

I get what you are trying to achieve now I think. For simplicity, I’d probably make the whole background an svg file (so that it is fully responsive) with the lines and including the white section for the header, and then use ‘transparent’ in the css for the header background.

some hints on svg – http://css-tricks.com/using-svg/

maybe that helps or offers another direction to consider?

1 user says Thank You to swissa for this useful post

1. Saguaros

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#522876

Swissa,

Thank you for your input. It really helped. While I’m not using an SVG due to some issues with the positioning of the image for some reason, the simplicity of just including the white block in the orange line background image got me on my way. I don’t how I didn’t think of this.

So all I ad to do was create a few variations of the size of this graphic for the various responsive states and it’s working like I wanted it to.

Thanks for helping me think outside (or in this case) inside the box!

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

1 user says Thank You to Scott Lavelle for this useful post

1. Saguaros

[Author]

Posts