Loading...
 
Skip to main content

Themes


You are viewing a reply to Inserting image full width top area

Re: Inserting image full width top area

Hi,

You can insert the image like this: first of all, remove the three lines of box-shadow rules for the body tag. These aren't needed when you use the flag background. (But I'd copy, paste and save them somewhere in case you want to have that appearance again in the future.) Then add these rules:

Copy to clipboard
body { background: #000 url(http://thepatriotwoodworker.com/uploads/monthly_2016_05/stars_and_stripes.jpg.e0837ceb7e0d972fd7ae5fdf7a9b1c84.jpg) no-repeat; background-size: 100% 196px; }


(I just copied and pasted that URL for the image. You may have to correct it if it doesn't work as is.)

Now, if you want to replicate the appearance pretty exactly, there's a problem because the top modules zone has a white background, rather than the transparent background of the forums site. To get that appearance, add this rule:

.container { background: transparent; }

But this makes the entire container transparent. To recover the white background of the content areas other than the top module zone, add this rule:

#row-middle { background: #fff; }

The text color in the top modules zone needs some adjustment to be seen better against the flag background, so you can add this:

#top_modules h2 { color: #fff; }

I think that'll do it.

-- Gary