header repeats inself vertically when I resize the browser window

I have created a Wordpress site at risen.michianait.net
I have used the background-size:100%; CSS rule to make the header image responsive.
However, when I resize the browser window, the header does shrink but the text repeats itself vertically. Also I would like the font size to increase (I guess using media queries?) when I decrease the browser size.

Should I be using a different approach? Like using an image slice for the background and then repeating it horizontally, and placing actual text (I'm not sure how) on top of that, so it can adjust using media queries?

Thanks for any help.

Mark
karnac2020Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Can't see your problem. Your site looks absolutely fine, even when resized. Everything seems to behave as it's supposed to. I can't actually see ANY images on your site at all, but the layout is OK.

I am getting a 404 error for your header image - it's looking for this file:

url("http://www.risen.dev/wp-content/uploads/2013/09/UMCLogo.jpg")

I wouldn't advise coding absolute URLs in your CSS.
0
karnac2020Author Commented:
Thanks for your comment.

I am using a Mac, and on both Safari and FF, when I resize the browser window, the text shrinks, but repeats itself vertically.

Are you using Windows or a Mac? Maybe it is just happening on the Mac.
0
Chris StanyonWebDevCommented:
I'm on windows.

what text are you referring to?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

karnac2020Author Commented:
I'm just looking at the text in the header. There are no other images on that page.
0
Chris StanyonWebDevCommented:
Right. Get it now. Your image is not showing up (re-read my first post), but I now see what you mean.

By default, background images are repeated. As you shrink your browser, the images shrinks horizontally and vertically. Your header wrapper is set to 120px deep so as your image shrinks there's room in the header to show this repetition.

You have a few options. You can add background-repeat: no-repeat to the #header-content rule (it will shrink and show the background colour - currently white).

You could insert an image into the #header-content div, instead of using a background-image (set the height of the header to auto)

You could overlay images - set the background of the header to the red texture, and then include an image <img> of the text within the header.

Finally, you could set the background to the red texture and then just insert text in the header. You can use most fonts know if you have the font. You could also check out Google Fonts for a list of free, ready to use web fonts.
0
karnac2020Author Commented:
Hi Chris,

I would like to use the solution in your last paragraph. I know how to specify a color using CSS, but how do you specify the texture?

Thanks
Mark
0
Chris StanyonWebDevCommented:
Hey Mark,

You'd create a tileable image that is the red texture and set the background-image for the element to that. You'd then use normal HTML for anything that sat over it.

You HTML would be something like:

<div id="header-content">
   <h1>First United Methodist Church</h1>
</div>

Open in new window

And your CSS would be something like:

#header-content {
   background: url("redTexture.jpg") repeat left top #6C2126;
}

#header-content h1 {
   color:white;
   font-size: 28px; 
   text-shadow: 2px 2px black;
}

Open in new window

You'd need a background image similar to this:

redTexture.jpg - a tileable background image
0
karnac2020Author Commented:
Thanks Chris,

I will have to modify my child theme to put in the HTML. I am currently using a theme that only allows changes to the CSS, so I was hoping there was a way to add the textured background using only CSS. If I use a fixed width red textured header, then I don't think the site will be responsive, but maybe if the header HTML uses divs it can be done.

Thanks
Mark
0
Chris StanyonWebDevCommented:
You may be able to get away with just editing the CSS. Currently your HTML contains a DIV with an ID of logo - this is hidden using CSS:

#logo { display: none; }

Remove that and you will see the logo. Currently the logo is of 'Risen Theme', but if you overwrite the logo.png with your own (http://risen.michianait.net/wp-content/themes/risen/styles/light/images/logo.png), then you don't need to edit the HTML. Remember that if you want your texture to show through your logo, then you'll need to make sure it has transparency.

Add in the CSS for the #header-content to show your texture and you should be good to go.

Also, you don't use a fixed-sized texture image - you simply use a small, tileable image that constantly repeats horizontally and vertically, so it will be responsive
0
karnac2020Author Commented:
Thanks Chris,

I will give this a try and get back to you.

Mark
0
karnac2020Author Commented:
Thanks Chris! I made those changes (and just kept the Risen logo for now.) I obviously couldn't use the h1 to add the heading because I can't alter the html. If I knew how to alter the HTML in the Theme, I would do that to add the text of the heading.

Mark
0
Chris StanyonWebDevCommented:
All the HTML files for wordpress are kept in your theme's folder. Depending on the themes structure, the header content is most likely in the heaer.php file. Open that with a text editor and you're likely to see the <div id="header-content">

You could add the H1 directly in there, but make sure you backup any files you plan on changing :)
0
karnac2020Author Commented:
Chris,

I actually just tried adding an H1 with Firefox. It worked, but when I narrowed the browser window to try out the responsiveness, the tag line moved on top of the H1 text for a while, until I got the window really small (as for a smartphone) and then the tagline just disappeared. I imagine that has to do with how the Theme was written.
0
karnac2020Author Commented:
Chris,

I have replaced the logo image with <h1>First UMC</h1> to use text instead of an image for the logo. However, I can't seem to make the text clickable as the image is. This method of creating a link seems to work in web pages, but I can't get it to work in the header. Can you see what is wrong? I really appreciate your help.

Mark

Again, the site is risen.michianait.net
0
Chris StanyonWebDevCommented:
Mark,

The heading is actually clickable, it's just that it sits underneath the #top-right div. Your HTML looks like the following:

<div id="header-content">
   <div id="logo"></div>
   <div id="top-right"></div>
</div>

Open in new window

The #top-right div has it's position set to absolute, the left edge set to 0 and the width set to 100%, so it effectively moves the whole div over your logo, preventing you from clicking it. If I were you, I would change the CSS for the top-right DIV so that it is 50% width and set to the right, not the left of the container:

#top-right {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}

Open in new window

That will allow your heading to become clickable.
0
karnac2020Author Commented:
Chris,

I made those changes on risen.michianait.net. It repositioned things, but still nothing is clickable.

Mark
0
Chris StanyonWebDevCommented:
You have 2 rules for the #top-right div. The one at line 1339 of style.css still has left:0 - you need to remove that.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
karnac2020Author Commented:
Chris,

That did the trick! First I just tried adding !important to the right:0 rule at the bottom of the style sheet where I added in the new #top-right div, but that didn't work. Then I just commented out the left:0 rule in the original #top-right div entry in style.css and it worked.

What development tool are you using that you are able to spot these rules so well? Firebug in FF, Chrome, Safari?

Thanks so much for your help!

Mark
0
karnac2020Author Commented:
Chris was a fantastic help. I really appreciate his  help.
0
Chris StanyonWebDevCommented:
I use Firebug in Firefox.

Using the important keyword wouldn't work because they're different rules. important only works on the same properties, for example:

right: 0 !important;
right: 50px;

Open in new window

Pleased you got it working :)
0
karnac2020Author Commented:
Yes, I hadn't thought about that. I was trying to negate the left:0 rule.

I have been searching for a plugin that would let me use line numbers in the editor so that iw would be easier to track corrections - like the one you gave me.

Thanks
Mark
0
Chris StanyonWebDevCommented:
If you want line numbers, most IDEs and advanced text editors will give you that. NotePadd++ is one example of a Advanced Text Editor. For a full IDE (Integrated Development Environment) I use Aptana Studio.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.